js 限制表單輸入長度漢字為兩個(gè)字符

2019-11-20 23:45:33

字體：大中小

供稿：網(wǎng)友

將該效果整合成了一個(gè)函數(shù)，此函數(shù)接受3個(gè)參數(shù)：
第一個(gè)為textarea或其他text表單的ID；
第二個(gè)為顯示輸入內(nèi)容的ID，可留空；
第三個(gè)為最多輸入的字符，一個(gè)漢字為2個(gè)字符。
這只是一個(gè)基礎(chǔ)效果，歡迎同學(xué)們進(jìn)行優(yōu)化和改進(jìn)。
要獲取代碼請(qǐng)查看demo的源文件

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>限制表單輸入長度 漢字為兩個(gè)字符</title> <meta name="auther" content="f7" /> <script> function lengthLimit(elem, showElem, max){ var elem = document.getElementById(elem); var showElem = document.getElementById(showElem); var max = max || 50;// 最大限度字符，漢字按兩個(gè)字符計(jì)算 function getTextLength(str){// 獲取字符串的長度 一個(gè)漢字為2個(gè)字符 return str.replace(/[^/x00-/xff]/g,"xx").length; }; // 監(jiān)聽textarea的內(nèi)容變化 if(/msie (/d+/./d)/i.test(navigator.userAgent) == true) {// 區(qū)分IE elem.onpropertychange = textChange; }else{ elem.addEventListener("input", textChange, false); } function textChange(){// 內(nèi)容變化時(shí)的處理 var text = elem.value; var count = getTextLength(text); if(count > max){// 文字超出截?cái)?for(var i=0; i<text.length; i++){ if(getTextLength(text.substr(0, i)) >= max){ elem.value = text.substr(0, i); if(showElem) showElem.innerHTML = elem.value;// 顯示輸出結(jié)果 break; }; } }else{ if(showElem) showElem.innerHTML = elem.value;// 顯示輸出結(jié)果 }; }; textChange();// 加載時(shí)先初始化 }; </script> </head> <body> <textarea name="textarea" id="commentText" style="width:500px; height:150px;"></textarea> 最多輸入20個(gè)漢字 <input type="button" value="JS添加內(nèi)容" onclick="document.getElementById('commentText').value = '您想說dasdsadsad的話！請(qǐng)輸5325135353入您想說的'; lengthLimit('commentText', 'dsa', 40);" /> <div   class="iwvjtn8m0"   id="dsa"></div> <script type="text/javascript"> lengthLimit("commentText", "dsa", 40); </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：javascript 圖片放大縮小功能實(shí)現(xiàn)代碼

下一篇：js 重構(gòu)Array的sort排序方法