input实时监听控制输入框的输入内容和长度，并进行提示和反馈（非change事件）

一、前言

在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事件，
通过监听输入框的每一次输入，来实时的反馈显示给用户。

注意：onchange 事件在这种场景下不好使。

　　上面代码里面 document.querySelector("input") 是给页面上所有input元素都添加监听。实际项目上没必要监听所有input元素，有点浪费，我只需要给某些特定输入框添加监听效果。

• 监听指定name的页面元素： document.getElementsByName('UName')
• 监听指定id的页面元素： document.getElementById('txtName')
• 监听指定class的页面元素： document.getElementsByClassName('MyClassName')

3）输入框的输入长度限制

不要通过监听事件来进行长度限制，直接使用input自带的maxlength进行

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

三、结语

　　MVVM模式能够很好的实现数据绑定，以上的方法只是传统JS下无奈的选择，建议还是早早的拥抱框架吧