欢迎您, 来到 宁时修博客.^_^

实时监控文本框输入字数

2017/09/30 宁时修 Jquery,javascript 766
基于Jquery的keyup()实现,可以实时监控文本框中用户输入的字数值变化。

在项目开发中,难免会有用户输入框限制字数的需求,实现监控字数说白了单纯就为了提高用户体验。下面我们一起来看看,如何运用Jquery来实现这样的效果。GO....

Html代码:

<textarea id="cp-text"></textarea><br/>
<p>最多只能输入<span id="cp-keyup-nums">200<span>字哦</p>
注意:必须引入Jquery哦。

Javascript代码:

 // 实时显示字数
  $("#cp-text").on('keyup',function(){
      var _length = 200;
      var in_len = parseInt(_length) - parseInt($(this).val().length);
      if(in_len >= 0){
         $("#cp-keyup-nums").html(in_len + '/200');
         // 可以继续执行其他操作
      }else{
          // 否则就不要在输入啦 ^_^
           $("#cp-keyup-nums").html('0/200');
          return false;
     }
   });

看吧,是不是很简单呢。QQ图片20170930091909.gif

点赞
说说你的看法

所有评论: (0)