`

Limiter的简单demo--20131029

 
阅读更多
1、效果及功能说明

在输入框内限定了数字数量后每写一个字符减少一个字符的位置并显示出还能写多少个字

2、实现原理

是首先判断输入的格式是否是UTF-8的格式格式正确下才能有效的进行计算，但后是定义一个限定的值后加进输入框内，后安装减法输入一个字符就少一个字符的位置并显示下面

3、主要的方法 

//判断J_AucTitle里面的有多少个字 J_LimiterWrapper里面的显示出来多少个字
        S.use('gallery/limiter/1.4/index', function (S, Limiter) {
            var textLimiter = new Limiter('#J_AucTitle',{wrapper:'#J_LimiterWrapper'});
            textLimiter.render();
        })


4、代码

Html5代码 
<!DOCTYPE html>
<html>
<head>
	<script src="http://a.tbcdn.cn/s/kissy/gallery/limiter/1.4/index-min.js?t=20130621173819"></script>
    <title>Limiter的简单demo</title>
    <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base-min.css">
</head>
<body>
    <div class="controls">
        <input type="text" id="J_AucTitle" name="item-title" value="明河">
        <div id="J_LimiterWrapper" style="margin-top:10px;"><span class="ks-letter-count">你还可以输入<em class="J_LetterRemain">50</em>个汉字</span></div>
    </div>

    <script>
    	//判断输入的格式是否是utf-8的格式，只有utf-8才可以识别清楚
        var S = KISSY;
        if (S.Config.debug) {
            var srcPath = "../../../";
            S.config({
                packages:[
                    {
                        name:"gallery",
                        path:srcPath,
                        charset:"utf-8",
                        ignorePackageNameInUri:true
                    }
                ]
            });
        }
		//判断J_AucTitle里面的有多少个字 J_LimiterWrapper里面的显示出来多少个字
        S.use('gallery/limiter/1.4/index', function (S, Limiter) {
            var textLimiter = new Limiter('#J_AucTitle',{wrapper:'#J_LimiterWrapper'});
            textLimiter.render();
        })
    </script>

</body>
</html>
分享到：
| KISSY文本diff工具--20131028
评论
1 楼 hxp520520 2014-07-09  
new Limiter() 这个对象是kissy API里面的。没看懂这个对象
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics