JS驗證文字框字數並做限制和提示
阿新 • • 發佈：2019-01-12
效果如圖；解決輸入時拼音長度也算字串長度的問題。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 還可以輸入<span id="word">10</span>個字<br /> <textarea id="txt" maxlength="10"></textarea> </body> </html> <script language="javascript" type="text/javascript"> var txt = document.getElementById("txt"); var txtNum = document.getElementById("word"); var maxlength = 10; var sw = false; //定義關閉的開關 txt.addEventListener("keyup", function () { if (sw == false) { countTxt(); } }); //ompositionstart在輸入中文或者語音等需要等待一連串的輸入的操作之前觸發 txt.addEventListener("compositionstart", function () { sw = true; }); //compositionend在輸入中文或者語音等完畢或取消時觸發 txt.addEventListener("compositionend", function () { sw = false; countTxt(); }); //這兩個屬性有點類似於“開關”，如：開始輸入拼音時開關開啟，不再改變監測得到的長度數值。用拼音完整輸入一個或是一串文字後，開關關閉，此時得到監測的數值長度。 function countTxt() { //計數函式 if (sw == false) { //只有開關關閉時，才賦值 txtNum.textContent = maxlength - txt.value.length; } } </script>