這篇文章主要介紹js怎么實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比麟游網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式麟游網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋麟游地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)（包含中文只能輸入10個(gè)，全ASCII碼能夠輸入20個(gè)）

textarea稱文本域，又稱文本區(qū)，即有滾動(dòng)條的多行文本輸入控件，在網(wǎng)頁的提交表單中經(jīng)常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字?jǐn)?shù)，為此必須尋求其他方法來加以限制以達(dá)到預(yù)設(shè)的需求。

通常的做法就是使用#腳本語言來實(shí)現(xiàn)對(duì)textarea文本域的字?jǐn)?shù)輸入限制，簡(jiǎn)單而實(shí)用。假設(shè)我們有一個(gè)id為 txta1 的textarea文本區(qū)，我們可以通過以下代碼限制它的鍵盤輸入字?jǐn)?shù)為10個(gè)字（漢字或其他小角字符）：

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{ 
 if(this.value.length >= 10) 
  event.returnValue = false; 
} 
} 
＜/script＞

它的原理是通過對(duì)keydown（鍵盤鍵位按下）事件對(duì)指定id號(hào)的文本區(qū)進(jìn)行監(jiān)測(cè)，可以想象，它只能限制鍵盤輸入，如果用戶通過鼠標(biāo)右鍵粘貼剪切板中的文本，它無法控制字?jǐn)?shù)。

通過鍵盤輸入，以上文本區(qū)只能輸入10個(gè)字。但是，我們的目的并沒有達(dá)到！請(qǐng)隨便復(fù)制一些文本，試著用鼠標(biāo)右鍵粘貼，看看發(fā)生了什么。

你可以在網(wǎng)上找到類似上述的其他JS腳本，它們不管多么優(yōu)秀，其原理都是一樣的，通過對(duì)keydown、keyup或keypress之類的鍵盤鍵位操作事件來監(jiān)控文本區(qū)的輸入，無法防止鼠標(biāo)右鍵的粘貼，為此，如果一定要真正地限制textarea的字?jǐn)?shù)，我們還得為網(wǎng)頁加另一把鎖——禁用鼠標(biāo)右鍵，這無疑得付出額外的開銷，同時(shí)也可能是網(wǎng)頁制作者不一定愿意做的。其實(shí)，還有一個(gè)更簡(jiǎn)單的方法，使用onpropertychange屬性。

onpropertychange可以用來判斷預(yù)定元素的value值，當(dāng)元素的value值發(fā)生變化時(shí)判斷事件就會(huì)被觸發(fā)，僅關(guān)心被監(jiān)測(cè)元素的value值，避開了輸入的來源，從而可以比較理想地達(dá)成我們的限制字?jǐn)?shù)這一目的。它屬于JS范疇，可以在表單方框區(qū)代表中嵌套使用，以下是代碼和效果樣式，可以像上面那樣測(cè)試輸入，你會(huì)發(fā)現(xiàn)它真正達(dá)到目的：不管用什么方式輸入，它只能輸入100個(gè)字（漢字或其他小解符號(hào)）：

代碼：

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

當(dāng)然，為了更為保險(xiǎn)，處理表單數(shù)據(jù)的后臺(tái)腳本程序還應(yīng)該對(duì)提交來的數(shù)據(jù)進(jìn)行再一次的檢測(cè)，如果字?jǐn)?shù)超出預(yù)設(shè)的數(shù)量則進(jìn)行相應(yīng)處理，這樣才達(dá)到真正限制字?jǐn)?shù)的目的。（完）

另外一種方法實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)（包含中文只能輸入10個(gè)，全ASCII碼能夠輸入20個(gè)）

<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>

剩余字?jǐn)?shù):

<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 里面提示輸入大字節(jié)數(shù)。

例如：

<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>

以上是“js怎么實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站aaarwkj.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：js怎么實(shí)現(xiàn)textarea限制輸入字?jǐn)?shù)-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://aaarwkj.com/article28/cocgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、做網(wǎng)站、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、建站公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)