js實現textarea限制輸入字數，js實現textarea字數

js實現textarea限制輸入字數，js實現textarea字數

實現textarea限制輸入字數（包含中文只能輸入10個，全ASCII碼能夠輸入20個）

textarea稱文本域，又稱文本區，即有捲軸的多行文本輸入控制項，在網頁的提交表單中經常用到。與單行文字框text控制項不同，它不能通過maxlength屬性來限制字數，為此必須尋求其他方法來加以限制以達到預設的需求。

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

＜script language="#" type="text/ecmascript"＞ 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>

當然，為了更為保險，處理表單資料的後台指令碼程式還應該對提交來的資料進行再一次的檢測，如果字數超出預設的數量則進行相應處理，這樣才達到真正限制字數的目的。（完）

另外一種方法實現textarea限制輸入字數（包含中文只能輸入10個，全ASCII碼能夠輸入20個）

<script> function check() { var regC = /[^ -~]+/g; var regE = /\D+/g; var str = t1.value; if (regC.test(str)){  t1.value = t1.value.substr(0,10); } if(regE.test(str)){  t1.value = t1.value.substr(0,20); } } </script> <textarea maxlength="10" id="t1" onkeyup="check();"> </textarea>

還有一種方式：

function textCounter(field, maxlimit) { if (field.value.length > maxlimit){ field.value = field.value.substring(0, maxlimit); }else{ document.upbook.remLen.value = maxlimit - field.value.length; } } <textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 

剩餘字數:

<input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>function LimitTextArea(field){  maxlimit=200;  if (field.value.length > maxlimit)   field.value = field.value.substring(0, maxlimit);    }<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

title="The textarea width must less than 300 characters." 放在textarea 裡面提示輸入最大位元組數。

例如：

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！