DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> textarea不能通過maxlength屬性來限制字數的解決方法教程
textarea不能通過maxlength屬性來限制字數的解決方法教程
編輯:關於JavaScript     

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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved