js文本框计数组件先上效果图:样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交。具体例子可以点击demo:http://www.lovewebgames.com/jsmodule/word-count ...
js文本框计数组件
先上效果图:
样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交。具体例子可以点击demo:http://www.lovewebgames.com/jsmodule/word-count.html,它的源文件托管在github上:https://github.com/tianxiangbing/word-count
使用方法案例:
<div > <div ><em>30</em></div> <textarea name="txt" id="txt" cols="30" rows="10" >万色城是一个创业平台,所有万色城的网商通过加盟,注册一个属于自己的网上商城。推广自己的商城,销售商城的商品创造收益。每个网商拥有一个属于自己的独立域名。万色城是国内唯一全部实行“实名制”的网上商城,每一个网商,以自己真实的姓名、照片和信誉,作为诚信经营的保障。</textarea></div> <p><input type="button" value="点击提交" ></p> <script type="text/javascript" src='/images/loading.gif' data-original="../src/zepto.js"></script> <script type="text/javascript" src='/images/loading.gif' data-original="../src/word-count.js"></script> <script> $(function() { $(".click").click(function(){ if(!$('.txt').data('overflow') ){ alert('ok') } }); $('.txt').WordCount({ max:200, isOverflowCut: false, overClass:"over-number", num:$(" .counter em"), withButton:".click", minHeight:100, overflowCallback: function() { //this.textBox.addClass('over-number'); //$(".counter em").addClass('over-number'); }, changeCallback: function(num) { //var n = this.max - num; //$(" .counter em").html(n); }, passClallback: function() { //this.textBox.removeClass('over-number'); //$(".counter em").removeClass('over-number'); }, isByte: true//字节 }); }); </script>
原标题:[js开源组件开发]js文本框计数组件
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。