JavaScript 限制文本框输入长度（支持字符限制）

2018-07-20 来源：open-open

1.实时显示可输入的字数（字节数）

2.两种限制方式（长度、字节数）

3.中文输入法下可正常使用，无BUG

4.同一页面可以使用多个，相互不干扰

limit.js代码：

function limit(){     
    var txtNote;//文本框     
    var txtLimit;//提示字数的input     
    var limitCount;//限制的字数     
    var isbyte;//是否使用字节长度限制（1汉字=2字符）     
    var txtlength;//到达限制时，字符串的长度     
    var txtByte;     
    this.init=function(){     
        txtNote=this.txtNote;     
        txtLimit=this.txtLimit;     
        limitCount=this.limitCount;     
        isbyte=this.isbyte;     
        txtNote.onkeydown=function(){wordsLimit()};txtNote.onkeyup=function(){wordsLimit()};     
        txtLimit.value=limitCount;           
    }        
    function wordsLimit(){     
        var noteCount=0;             
        if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length}     
        if(noteCount>limitCount){     
            if(isbyte){     
                txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2));     
                txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;              
                txtLimit.value=limitCount-txtByte;     
            }else{     
                txtNote.value=txtNote.value.substring(0,limitCount);     
                txtLimit.value=0;     
            }        
        }else{     
            txtLimit.value=limitCount-noteCount;     
        }     
        txtlength=txtNote.value.length;//记录每次输入后的长度     
        txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length;     
    }     
}

<html>    
<body>    
<input id="txtNote" />    
还可输入<input type="text"  id="txtCount"  />个字符     
</body>    
<mce:script src="limit.js" mce_src="limit.js"></mce:script>  
<mce:script type="text/javascript"><!--  

var lim=new limit();     
lim.txtNote=document.getElementById("txtNote");     
lim.txtLimit=document.getElementById("txtCount");     
lim.limitCount=20;     
lim.isbyte=true;     
lim.init();  
// --></mce:script>    
</html>

标签：代码

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:Mapreduce任务实现邮件监控

下一篇:android.support.v4.widget.SwipeRefreshLayout

最新资讯

热门推荐