vue 监听input的改变

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 监听input的改变相关的知识,希望对你有一定的参考价值。

参考技术A 要求:在动态生成的input中,监听input的改变,且是输入结束后,再调用监听方法。

第一种:

附注:v-on:input 是输入时监听 input的改变。

第二种:

时时监听input内容的改变

心得:我们都知道inoput有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变。

   刚开始的时候我是想用setInterval设置计时器的原理定时监听input内容的改变,但是结果差强人意,效果一点也不好,有时候操做过快还会出现undefined的情况。

解决方法:通过阅读资料了解到input有意的input事件在大多当今主流的浏览器都能实现对input输入内容的时时监听;

    <input id="test"/>

    $("#test").bind("input",function(){console.log("内容变化了");});

    由于公司项目是兼容到IE10,还有火狐,谷歌浏览器,360是中国人可能用的比较多的浏览器,360浏览器在中文输入的情况下,按住shift+字母然后回车的方法输入大写字母,用keyup,keydown,keypress事件都不能获取当前变化的内容,而是之前的内容,input事件很好的解决了这一兼容性问题。

但是,以上代码仅在除了ie的浏览器才work,那ie该怎么处理呢? 在ie中有一个属性叫做onpropertychange:

<input id="test" onpropertychange="alert(‘change‘);" type="text" />

经过调试后马上就会发现,这个属性是在元素的任何属性变化时都会起作用,包括我们这里所提到的value,但至少是起作用了,那接下来的任务就是筛选出property为value的变化。

document.getElementById(‘test‘).attachEvent(‘onpropertychange‘,function(e) {
    if(e.propertyName!=‘value‘) return;
    $(that).trigger(‘input‘);
});

在上面代码中的回调函数中会传入一个参数,为该事件,该事件有很多属性值,搜寻一下可以发现有一个我们很关心的,叫做propertyName,也就是当前发生变化的属性名称。然后就相当简单了,只要在回调函数中判断一下是否为我们所要的value,是的话就trigger一下‘input’事件。

然后,就可以在主流浏览器中统一用这样的方式来监听‘input’事件了。

$(‘#test‘).on(‘input‘,function(){
    alert(‘input‘);
})
完整带代码:
$(‘#test‘).on(‘input‘,function(){
    alert(‘input‘);
})
//for ie
if(document.all){
    $(‘input[type="text"]‘).each(function() {
        var that=this;

        if(this.attachEvent) {
            this.attachEvent(‘onpropertychange‘,function(e) {
                if(e.propertyName!=‘value‘) return;
                $(that).trigger(‘input‘);
            });
        }
    })
}

以上是关于vue 监听input的改变的主要内容,如果未能解决你的问题,请参考以下文章

时时监听input内容的改变

Vue中监听地址栏路由改变

Vue监听页面窗口改变,实现子页面高度数值更新

原生js监听input值改变事件

vue 监听 input 回车事件

JQuery如何监听一个DIV宽高的变化?