Limiter的简单demo--20131029

最新推荐文章于 2024-06-07 22:24:10 发布

xjwolaile

最新推荐文章于 2024-06-07 22:24:10 发布

阅读量257

点赞数

分类专栏：前端技术学习 demo

本文链接：https://blog.csdn.net/xjwolaile/article/details/84493869

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

demo

1 篇文章 0 订阅

订阅专栏

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>

xjwolaile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Limiter的简单demo--20131029

1、效果及功能说明在输入框内限定了数字数量后每写一个字符减少一个字符的位置并显示出还能写多少个字2、实现原理是首先判断输入的格式是否是UTF-8的格式格式正确下才能有效的进行计算，但后是定义一个限定的值后加进输入框内，后安装减法输入一个字符就少一个字符的位置并显示下面3、主要的方法 [code="html5"]//判断J_AucTitle里面的有多少个字...
复制链接

扫一扫