javascript限制textarea文字框輸入字元個數程式碼例項

admin發表於2017-03-28
JavaScript字元

本章節介紹一下如何限制textarea文字框輸入字元的格式，並且還具有較為人性化的倒計字數提示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function textCounter(field,countfield,maxlimit){
  if(field.value.length>maxlimit){
    field.value=field.value.substring(0,maxlimit);
  }
  else{
    countfield.value=maxlimit-field.value.length;
  }
}
window.onload=function(){
  var otxt=document.getElementById("txt");
  var oshow=document.getElementById("show");
  otxt.onkeyup=function(){
    textCounter(otxt,oshow,65);
  }
  otxt.oncontextmenu=function(){
    return false;
  }
}
</script>
</head>
<body>
<table>
  <tr>  
    <td><textarea id="txt" cols="60" rows="5"></textarea><td>
  </tr>
  <tr>
    <td>剩餘:<input id="show" type="text" value="65" readonly="readonly">個字元,最大允許65個字元</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function textCounter(field,countfield,maxlimit)，此函式實現限制效果，第一個引數是textarea文字框物件，第二個引數是顯示倒計字數的物件，第三個是允許輸入的最大個數。

2.if(field.value.length>maxlimit){field.value=field.value.substring(0,maxlimit);}，判斷輸出的長度是否大於最大長度，如果大於則進行字串擷取，並且將擷取的後的內容賦值給文字框。

3.else{countfield.value=maxlimit-field.value.length;}，沒有大於的話，進行倒計效果。

4.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

5.var otxt=document.getElementById("txt")，獲取textarea物件。

6.var oshow=document.getElementById("show"),獲取id屬性值為show的元素。

7.otxt.onkeyup=function(){

  textCounter(otxt,oshow,65);

}，為textarea註冊onkeyup事件處理函式。

8.otxt.oncontextmenu=function(){

  return false;

}，防止滑鼠右鍵賦值黏貼。

二.相關閱讀:

1.substring()函式可以參閱javascript substring()一章節。

2.onkeyup事件可以參閱javascript keyup 事件一章節。

相關文章