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, '')");

• οnpaste="return false;" 禁止向控件粘贴内容
• οncοpy="return false;" 禁止复制
• oncut="return false;" 禁止剪贴
• οncοntextmenu="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下无奈的选择，建议还是早早的拥抱框架吧

转载于:https://www.cnblogs.com/nangezi/p/9325922.html