textarea 文本域字數限制淺析--兼容全部瀏覽器

今天忽然遇到一個小問題，說實話，貌似再小的問題，只要小碼哥起初沒有頭緒，那就必定會卡殼。不要笑我！！

下面說說今天遇到的問題：即textarea文本域標籤如何限定其內輸入的文本字數？

暈了，有人說了，NM不會百度啊，，，，，沒錯，本文就是我百度出來的，看着還挺詳細，就轉來了。哈哈！

其實說到文本字數，咱們都知道說的是textarea的value值。可怎麼完美的解決。還有待驗證！

一般的作法就是使用#腳本語言來實現對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>

上面在寫textarea中的屬性時，會看到不少關於鍵盤輸入的屬性。必定不要忽略哦，，，，

本文轉自：http://www.cnblogs.com/butterfly/archive/2009/04/27/1444598.html