input實時監聽控制輸入框的輸入內容和長度，並進行提示和反饋

1、前言

在MVVM模式下，有個雙向數據綁定（data-binding）的優點，能夠經過viewmodel實時的監聽用戶操做，也能夠將model的改動實時的反饋到界面上。

那麼，在傳統的js操控DOM的狀況下如何實現呢？

下面咱們以輸入框（input）爲例，對用戶的操做進行監聽，並實時的反饋給用戶

 

2、正文

1）控制輸入框的輸入

//控制輸入框的輸入==只能輸入四位，且必須是數字和字母 $(node).attr("onkeyup", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')"); $(node).attr("onpaste", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')"); $(node).attr("oncontextmenu", "if(this.value.length>4){this.value=this.value.substr(0,4)};value=value.replace(/[^0-9A-Za-z]/g, '')");

• onpaste="return false;" 禁止向控件粘貼內容
• oncopy="return false;" 禁止複製
• oncut="return false;" 禁止剪貼
• oncontextmenu="return false;" 禁止使用右鍵

上面代碼的：onkeyup表示偵聽鍵盤輸入事件；

　　　　　　onpaste表示偵聽瀏覽器粘貼事件；

　　　　　　oncontextmenu表示偵聽鼠標右鍵事件；

 2）經過監聽輸入對頁面進行反饋

　　上面的代碼雖然能夠經過監聽事件來控制輸入框的輸入，但他是經過添加屬性的方式，沒法經過監聽狀況進行數據反饋

//經過偵聽輸入框，實時顯示輸入字符 if(/msie/i.test(navigator.userAgent)){ document.querySelector("input").addEventListener("propertychange", function(){ var input_value = document.querySelector("input").value; document.querySelector(".value").innerHTML = input_value /10;  }) }else{ document.querySelector("input").addEventListener("input", function(){ var input_value = document.querySelector("input").value; document.querySelector(".value").innerHTML = input_value /10;  }) }

/msie/i.test(navigator.userAgent)能夠進行瀏覽器內核判斷，區分IE和非IE
IE使用propertychange，非IE使用input事件，
經過監聽輸入框的每一次輸入，來實時的反饋顯示給用戶。

3）輸入框的輸入長度限制

不要經過監聽事件來進行長度限制，直接使用input自帶的maxlength進行

<input name="" type="text" maxlength="4" placeholder="">

 

3、結語

　　MVVM模式可以很好的實現數據綁定，以上的方法只是傳統JS下無奈的選擇，建議仍是早早的擁抱框架吧