JavaScript 限制文本框輸入長度（支持字符限制）

m45y 9年前發布 | 2K 次閱讀 JavaScript

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>    </pre>
 本文由用戶 m45y 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！