一、前言
在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下无奈的选择，建议还是早早的拥抱框架吧