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

一、前言

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

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

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

 

二、正文

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="">

 

三、結語

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