文本域

限制字數方法

通常的做法就是使用JavaScript腳本語言來實現對textarea文本域的字數輸入限制，簡單而實用。假設我們有一個id為 txta1 的textarea文本區，我們可以通過以下代碼限制它的鍵盤輸入字數為10個字（漢字或其他小角字元）：

window.onload = function()

{

document.getElementById('txta1').onkeydown = function()

{

if(this.value.length >= 10)

event.returnValue = false;

}

</script>

它的原理是通過對keydown（鍵盤鍵位按下）事件對指定id號的文本區進行監測，它只能限制鍵盤輸入，如果用戶通過滑鼠右鍵貼上剪下板中的文本，它無法控制字數。試看以下效果，請嘗試用鍵盤輸入：

速度速度分散對

通過鍵盤輸入，以上文本區只能輸入10個字。但是，我們的目的並沒有達到！請隨便複製一些文本，試著用滑鼠右鍵貼上，看看發生了什麼。

你可以在網上找到類似上述的其他JS腳本，它們不管多么優秀，其原理都是一樣的，通過對keydown、keyup或keypress之類的鍵盤鍵位操作事件來監控文本區的輸入，無法防止滑鼠右鍵的貼上，為此，如果一定要真正地限制textarea的字數，我們還得為網頁加另一把鎖——禁用滑鼠右鍵，這無疑得付出額外的開銷，同時也可能是網頁製作者不一定願意做的。其實，還有一個更簡單的方法，使用onpropertychange屬性。

onpropertychange可以用來判斷預定元素的value值，當元素的value值發生變化時判斷事件就會被觸發，僅關心被監測元素的value值，避開了輸入的來源，從而可以比較理想地達成我們的限制字數這一目的。它屬於JS範疇，可以在表單方框區代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測試輸入，你會發現它真正達到目的：不管用什麼方式輸入，它只能輸入100個字（漢字或其他小解符號）：

代碼：

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

文本域

基本介紹

限制字數方法

幾種樣式

相關詞條

熱門詞條