代码改变世界

oninput和onpropertychange实时监听输入框值的变化

2014-07-30 00:24 龙恩0707 阅读(...) 评论(...) 编辑 收藏

oninput和onpropertychange实时监听输入框值的变化

  传统监听输入框的做法就是使用keyupkeydownkeypress,或者change事件来实现,但keyupkeydownkeypress事件是只要完成击键事件后就触发,不考虑输入框的值是否变化,也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作,更监听不了使用JS动态改变值的变化。而change事件必须是焦点离开输入框后才触发,并不能实时监听。所以这几个事件来监听输入框值变化并不完美。ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值),而标准浏览器(包括IE9+)可以使用HTML5薪增的oninput事件来监听,但是oninput并不能监听JS动态改变的值,网上虽然有很多方面的资料,很是很多都没有讲到监听JS动态改变值,碰巧今天同事做手机端碰到这个问题问到我,所以就总结了下!

JSFiddler效果如下:

你可以狠狠的点击这里:监听输入框值的变化

IE下onpropertychange实时监听输入框值的变化

      首先我们可以做个简单的demo来测试下,代码如下:

      HTML代码:

<h2>IE6-8监听输入框值的变化--onpropertychange事件,可以监听到js动态设置值</h2>
<input type="text" id="input" />
<div id="value" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

    JS代码:

//  兼容IE下(IE6-8) 键盘事件 IE9不支持此事件
$("#input").bind("propertychange",function(e){
    var value = $(e.target).val();
    $("#value").html(value);
});
// 兼容IE下 动态改变输入框值 是否监听到?
$("#input").val("11");

onpropertychange监听的是元素的property属性,并不只局限于value,也可以监听其他标准属性值,如:input的name值,效果可以看JSfiddler上面的链接。

标准浏览器下oninput实时监听输入框值的变化

  HTML代码如下:

<!-- IE9+标准浏览器  -->
<h2>标准浏览器监听输入框值的变化--oninput事件,不能监听到js动态设置值,但是可以监听到键盘事件值的变化</h2>
<input type="text" id="input2" />
<div id="value2" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

JS代码如下:

// 兼容标准浏览器 chrome firefox IE9+等 但是动态设置值并不支持
$("#input2").bind('input',function(e){
    var value = $(e.target).val();
    $("#value2").html(value);
});
// 兼容标准浏览器下 动态改变输入框值 是否监听到?
$("#input2").val("11");

标准浏览器下使用oninput事件也可以监听输入框值的变化,但是他和IE的onpropertychange事件有点不同:

  oninput不能监听JS动态改变的属性或者值。特别是想在移动开发上使用这个事件,但是纠结的不能监听到这个事件。

使用定时器功能来监听各个浏览器输入框值的变化(包括JS动态改变值或者属性)。

 HTML代码如下:

<h2>下面是对浏览器做兼容性处理,使用定时器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>

JS代码如下:

// 兼容各个浏览器下
var timer = 0,
    curVal = "";
$("#input3").bind("propertychange input",function(e){
    if(timer){
        clearInterval(timer);
        timer = 0;
    }
    curVal = $(e.target).val();
    $("#value3").html(curVal);
    interval();
});

function interval(){
    timer = setInterval(function() {
        if (curVal != $("#input3").val()) {
            curVal = $("#input3").val();                                 
     $("#value3").html($("#input3").val()); } }, 100); } interval(); // 兼容各个浏览器下 动态改变输入框值 $("#input3").val("11");

如上,使用定时器去不断检测值是否和当前值是否相等。

模拟valuechange事件变化,监听input,textarea等之前值,之后值得变化。

     valuechange事件是自定义事件的,有上面的监听当前值改变,为什么还要这个事件呢?那是因为比如输入框或者文本域,我想监听输入框之前的值和现在的值得话,那么上面的方法不好监听,监听不到,所以就再次封装了下,可以实时监听input或者textarea等之前值和之后值得功能。

    思路:正常的情况下还是和上面一样 用这两个事件 propertychange input 就可以监听键盘操作的事件了,但是标准浏览器对input事件,比如动态改变值得时候 监听不到,所以用了一个定时器不断的检测,如果值不相等的话,那么就执行回调函数,返回之前的值和之后的值。下面我们可以先看看jsFiddler效果吧!

 你可以狠狠的点击这里:  valueChange事件动态监听输入框input或者textarea之前值和现在值得变化!

下面是基本的HTML代码如下:

 

<h2>下面是对浏览器做兼容性处理,使用定时器</h2>
<input type="text" id="input3" />
<div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
<div class="clickme" data-value="11">点击我1,我的值为11</div>
<div class="clickme" data-value="22">点击我2,我的值为22</div>

 

JS代码如下:

function valuechange(element,callback) {
    var timer = 0,
          prevVal = $(element).val();
        timer = 0;
        if(timer){
            clearInterval(timer);
            timer = 0;
        }    
        timer = setInterval(function(){
            if(prevVal != $(element).val()) {
                if(prevVal == '') {
                    prevVal = undefined;
                }
                callback(prevVal,$(element).val());
                prevVal = $(element).val();
            }
        },100);

        $(element).bind("propertychange input",function(e){
            if(prevVal != $(e.target).val()) {
                if(prevVal == '') {
                    prevVal = undefined;
                }
                callback(prevVal,$(e.target).val());
                prevVal = $(e.target).val();
            }
        });
    }
    valuechange('#input3',function(prev,cur){
        $("#value3").html("之前的值是:"+prev+"当前的值"+cur);
    });
    // 动态js设置值
    $(".clickme").click(function(e){
        var value = $(e.target).attr("data-value");
        $("#input3").val(value);
    });