為textarea新增maxlength屬性程式碼例項

admin發表於2017-03-28

不能說textarea沒有maxlength屬性，但是相容性問題巨大，標準瀏覽器都支援，但是IE10以下的瀏覽器並不支援。下面就通過程式碼例項介紹一下用javascript模擬實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var textarea_maxlen={
  isMax:function(){
    var textarea=document.getElementById("area");
    var max_length=10;
    if(textarea.value.length>max_length){
      textarea.value=textarea.value.substring(0, max_length);
    }
  },
  disabledRightMouse:function(){
    document.oncontextmenu=function(){ return false; }
  },
  enabledRightMouse:function(){
    document.oncontextmenu = null;
  }
};
window.onload=function(){
  var txt=document.getElementById("area");
  txt.onkeyup=function(){ 
    textarea_maxlen.isMax();
  }
  txt.onfocus=function(){
    textarea_maxlen.disabledRightMouse();
  }
  txt.onblur=function(){
    textarea_maxlen.enabledRightMouse();
  }
}
</script>
</head>
<body>
<textarea id="area"rows="10" cols="40"></textarea>
</body>
</html>

上面的程式碼實現了限制textarea限制輸入字元數目的功能，下面介紹一下它的實現過程。

一.實現原理:

實現原理非常簡單，首先宣告瞭一個物件，此物件中定義3個方法，能夠實現限制輸入字元個數的功能。

第一個方法能夠實現當鍵盤按鍵鬆開的時候，檢查文字框中字串的個數，然後將超出的擷取。到現在這隻實現了一半的功能，如果使用者使用右鍵複製黏貼方式的話，就沒有效果了，所以第二個方法就是當文字框獲取焦點的時候被呼叫，它可以為document註冊oncontextmenu事件處理函式，事件處理函式的返回值為false，那麼就是禁用了右鍵功能，第三個方法當溫匡失去焦點的時候呼叫，解綁oncontextmenu事件處理函式。

二.相關閱讀:

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

相關文章