jQuery限制文字框輸入長度詳解

admin發表於2017-11-12
jQuery

通常情況下，文字框輸入內容的長度是有限制的。

下面通過程式碼例項介紹一下利用jQuery實現限制文字框內容輸入長度功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
function len(s){
  s=String(s);
  return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
}
function limit(obj,limit){
  var val=obj.value;
  if(len(val)>limit){
    val=val.substring(0,limit);
    while (len(val)>limit){
      val=val.substring(0,val.length-1);
    };
    obj.value=val;
  }
}
$(document).ready(function(){
  $("#txt").keyup(function(){
    limit(this,10);
  })
  $("#txt").contextmenu(function () {
    return false;
  })
})
</script>
</head>
<body>
<input type="text" id="txt"/>
</body>
</html>

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

一.程式碼註釋:

（1）.function len(s){}，此函式可以計算字串的長度，引數是計算的字串。

（2）. s=String(s)，將引數轉換為字串。

（3）.return s.length+(s.match(/[^\x00-\xff]/g) || "").length;，計算字串的長度，這裡能夠區分漢字，s.match(/[^\x00-\xff]/g)這個能夠返回字串中全形字元的陣列，然後用length計算出數目，如果沒有匹配的則返回null，這個時候就使用空字元""，然後再加上字串的length就是區分中英文的字串的長度了。

（4）.function limit(obj,limit){}，此函式實現了限制字串長度的功能，第一個引數要輸入字串的物件，第二個是規定的長度。

（5）.var val=obj.value，獲取指定物件的值。

（6）.if(len(val)>limit)，判斷長度是否大於限制的值。

（7）.val=val.substring(0,limit)，擷取字串長度，這裡擷取的時候並沒有區分中英文。

（8）.while(len(val)>limit){val=val.substring(0,val.length-1);}，因為上面的擷取的是字元的個數，沒有區分中英文，所以擷取後，還是有可能超出限制長度的，比如"螞蟻部落abc"，長度是11，如果擷取5的話，就是"螞蟻部落a"，這個時候它的長度是9，還是長度5，所以還要不斷的判斷減少字元的個數，知道不超過限制為止。

（9）.obj.value=val，將擷取後的值賦值給指定物件。

（10）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（11）.$("#txt").keyup(function(){limit(this,10);})，當鍵盤按鍵鬆開既可以實現判斷長度擷取字串效果。

（12）.$("#txt").contextmenu(function () {return false})，防止右鍵複製黏貼操作。

二.相關閱讀:

（1）.String()參閱JavaScript String()方法一章節。 

（2）.match()參閱正規表示式match()方法一章節。 

（3）.substring()參閱JavaScript substring()方法一章節。

（4）.keyup事件參閱jQuery keyup事件一章節。

相關文章