文字框限制輸入字數效果

admin發表於2018-03-23

很多網站有類似功能更，可以限制在文字框內輸入文字的數量，有些讓文字不超過多少字，有些文字不能少於多少字，原理基本一樣，下面介紹一下如何利用JavaScript實現此功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){ 
  var textarea=document.getElementById("mytext"); 
  textarea.onkeyup=function() { 
    checkMax(textarea,10); 
  }     
} 
function checkMax(textarea,maxLength){    
  var str=textarea.value;    
  var strlen=str.length;    
   
  if(strlen>maxLength){    
    alert('字數超過限制');    
    eval(textarea.value=str.substr(0,maxLength));    
  }    
}    
</script> 
</head> 
<body style="text-align:center"> 
<h1>請在文字框內輸入文字測試功能</h1> 
<textarea name="textfield" cols="60" rows="10" id="mytext"></textarea> 
</body> 
</html>

以上程式碼實現了限制文字輸入數量功能，並且可以將文字框內輸入的文字擷取至指定的數量。

實現過程：

（1）.核心是checkMax()函式，具有兩個引數，一個是要限制輸入文字數量的物件，一個是要限制的數量。

（2）.checkMax()函式功能介紹如下：

[JavaScript] 純文字檢視 複製程式碼
var str=textarea.value;

獲取文字框內的輸入值，同時計算出來輸入值的長度。下面的if語句用來判斷當前輸入文字的長度是否超過了指定的限制長度，如果超過會彈出一個警告框，並且通過substr()將超出的部分擷取掉。

（3）.window.onload=function(){...}的作用是當文件載入完成後才可以執行函式體內的程式碼，否則，由於程式碼是順序執行，會導致document.getElementById("mytext")無法獲取物件。然後為文字框的onkeyup事件繫結事件處理函式。

相關文章