實現textarea限制輸入字數

2021-08-31 11:15:27 字數 1308 閱讀 6396

實現textarea限制輸入字數(包含中文只能輸入10個,全ascii碼能夠輸入20個)

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

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

<script language="#" type="text/ecmascript">

window.onload = function() }

</script>

它的原理是通過對keydown(鍵盤鍵位按下)事件對指定id號的文字區進行監測,可以想象,它只能限制鍵盤輸入,如果使用者通過滑鼠右鍵貼上剪下板中的文字,它無法控制字數。

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

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

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

**:

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

另外一種方法實現textarea限制輸入字數(包含中文只能輸入10個,全ascii碼能夠輸入20個)

還有一種方式:

function textcounter(field, maxlimit) else }

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

例如:

textarea中限制輸入長度

要在textarea中限制輸入字元的長度,比如在twitter中要限制字元為140個,可實現的方法有 1.2.我們也可以將判斷寫在函式中,如果輸入的長度超過顯示,就顯示提示資訊,如下 function checkvalid return true 3.上述兩種方法無法判斷如果使用copy後的準確字數...

textarea中限制輸入字元長度

要在textarea中限制輸入字元的長度,比如在twitter中要限制字元為140個,可實現的方法有 1.2.我們也可以將判斷寫在函式中,如果輸入的長度超過顯示,就顯示提示資訊,如下 function checkvalid return true 3.上述兩種方法無法判斷如果使用copy後的準確字數...

textarea 輸入框限制字數

在textarea標籤中,只需要設定maxlength 即可,但是在textarea標籤中,ie9及ie9以下瀏覽器是不支援的,ie10 ie11則支援,估計後續的版本應該都會支援。現在來說下怎麼讓大部分ie版本都支援textarea 標籤限制字數。第一種方法 這樣子即可。備註 onchange o...