textarea文字框輸入文字數目倒計效果程式碼例項

admin發表於2017-04-01

通常情況下，textarea文字框輸入的文字內容陣列是有限制的。

如果能夠給文字框新增輸入文字倒計效果，那麼就可以讓使用者更加合理的組織語言，將會更加的人性化。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
maxLen=100;
function checkMaxInput(obj){
  if(obj.value.length>maxLen){
    obj.value=obj.value.substring(0,maxLen);
    remLen.innerHTML='您輸入的內容超出了字數限制'
  }
  else{
    remLen.innerText='還剩下'+ (maxLen-obj.value.length)+'字';
  }
}
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onkeyup=function(){
    checkMaxInput(this);
  }
}
</script>
</head>
<body>
<table width="40%">
 <tr>
  <td width="100%">倒計數文字框</td>
 </tr>
 <tr>
  <td width="100%">
   <form name="tickform">
     <textarea name="msgbox" rows="5" cols="31" id="txt"></textarea>
   </td>
  </tr>
</form>
 <tr>
  <td width="100%">
   <font align="right" id="remLen"><b></b></font>
  </td>
 </tr>
</table>
</body> 
</html>

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

一.程式碼註釋:

1.maxLen=100，輸入內容的最大長度。

2.function checkMaxInput(obj)，此函式可以對指定的文字框進行倒計效果。

3.if(obj.value.length>maxLen){

  obj.value=obj.value.substring(0,maxLen);

  remLen.innerHTML='您輸入的內容超出了字數限制'

}如果輸入內容的長度大於最大長度，那麼進行字串擷取，並給出相應提示。

4.else{

  remLen.innerText='還剩下'+ (maxLen-obj.value.length)+'字';

}如果沒有超過最大長度，那麼就進行正常的倒計效果。

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

6.var otxt=document.getElementById("txt"),獲取文字框物件。

7.otxt.onkeyup=function(){

  checkMaxInput(this);

}註冊onkeyup事件處理函式。

二.相關閱讀:

1.substring()方法可以參閱javascript String substring()一章節。

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

相關文章