产品要求输入框加上文字字数限制,你傲气甩头,没问题随便加,姐姐一个maxlength属性搞定,产品一句实时展示已输入字数且一个汉字等于两个字母,你就不淡定了,这是需要js控制的啊!没事,加呗~
首先就是html
<input type="text" class="input-limit" name="news_type[type_name]" value="" lay-limit="20"/>
接下来就是js控制了
$('.input').on('click',function(){ var $this = $(this); var value = ''; var max = $this.attr('lay-limit'); var $span = $('<span class="input-limit-tip">'+strLength($this.val()) + '/' + max); $span.insertAfter($this); $this.on('input',function(){ var strlen = strLength($this.val()); if(strlen > max){ $this.val(value); }else{ $this.next('.input-limit-tip').text(strLength($this.val())+ '/' +max); value = $this.val(); } }) }) function strLength(str){ var reg = /[^x00-xff]/g;//匹配汉字 return Math.round(str.replace(reg,"**").length) / 2; }