js监测输入框字数(一个汉字等于两个字母),超出限制输入无效

  产品要求输入框加上文字字数限制,你傲气甩头,没问题随便加,姐姐一个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;
}

 

posted @ 2018-01-05 13:54  微lin  阅读(598)  评论(0编辑  收藏  举报