网页特效代码_站长素材站移动版

表格/表单特效

主页 > 网页特效 > 表格/表单特效 >

Input输入框限制中文字数,超过字数限制则无法输入

GIF动图:Input输入框限制中文字数,超过字数限制则无法输入
所需金币: 注册会员免费下载 推荐等级:★★★☆☆ 更新时间:2018-12-26 效果演示:演示网址 下载列表 下载点击: /
特效简介
我们知道input控件有一个maxlength属性可以控制输入字符的长度,但是,它并不会识别是汉字还是其他符号,所以输入maxlength个汉字显然是不符合要求的。
为了实现对带有汉字的输入框长度控制,参考各位大神的贴子,我总结了一下方案:
第一种:定义js方法
<input style="width:258px;" type="text" value="限制10个汉字" onkeyup="checkLength(this, 20);" />
<script>
var checkLength = function(dom, maxLength){
    var l = 0;
    for(var i=0; i<dom.value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(dom.value[i])) {
            l+=2;
        } else {
            l++;
        }
        if (l > maxLength) {
            dom.value = dom.value.substr(0,i);
            break;
        }
    }
};
</script>
其中 /[\u4e00-\u9fa5]/ 为匹配汉字的正则。达到maxlength时候,输入输入字符将不会在显示

第二种:
<input style="width:258px;" name="title" type="text" id="title" value="限制10个汉字" maxlength="10" class="intxt" onfocus="inputAutoClear(this)"/>
<script> 
$('#title').bind('input propertychange',function(){ //添加监听input值的改变事件
   var tvalmum;
     //统计input输入字段的长度
   tvalnum = $(this).val().length;
   //如果大于10个字直接进行字符串截取,这里10个字不区分汉字和字母数字。
   if(tvalnum>10){          
     var tval = $(this).val();        
     tval = tval.substring(0,10);        
     $(this).val(tval);
     alert('长度超过限制,请控制在10个字以内!'); 
   }
});
</script>

0
下载地址
  • 百度网盘提取码:nkyw
  • 微云网盘提取码:2kwfb2
下载说明

· 本站下载链接均为网盘下载(百度网盘 & 微云网盘);
· 推荐使用第三方专业下载工具下载本站软件,使用 WinRAR v3.10 以上版本解压本站软件;
· 如果这个软件总是不能下载的请点击报告错误,谢谢合作!!
· 下载本站资源,如果服务器暂不能下载请过一段时间重试!
· 本站提供的一些商业软件是供学习研究之用,如用于商业用途,请购买正版。


    468x60