时时监听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‘);
            });
        }
    })
}
时间: 2024-12-12 17:55:01

时时监听input内容的改变的相关文章

iOS 监听UITextView内容的改变

长文本输入时比较喜欢用UITextView,因为它会自动换行,比UITextField好用些,但是当需要监听text view中的内容变化时.Apple缺没有提供像UITextField那样方便的代理方法. 其实要监测text view中内容的改变也不难,只需下面三步操作,即可实现与UITextField的代理方法相似的效果. 1.在- (void) viewDidLoad:使用通知中心,给UITextView添加观察者 1 NSNotificationCenter *nc = [NSNotif

原生js监听input值改变事件

哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http://www.cnblogs.com/wteng/p/5434403.html $('input').bind('input propertychange', function() { //to do }) 现在用原生js来实现一遍(其实我翻了下jquery的监听事件on的源码,没找到不知道他写哪了),本

jquery监听input元素输入

一般我们监听input内容的变化都是通过onchange()事件来绑定,但这个做法有一个缺陷就是只有当正在被输入的input元素失去焦点时(即鼠标点击了别处)才会触发,而实际上我们往往希望能够满足在用户输入过程中,在保持焦点不变的情况下随着输入内容的变化而触发一定事件处理函数(这样就不用劳烦用户用鼠标再点击以下别的地方). 这种应用场景可以使用jquery的绑定技术 eg. $("#gamount").bind('input propertychange',function(){  

Jquery实时监听input value

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body id="lia-body"> <div class="lia-content"> <div class="

监听input变化的事件

可以监听input变化的事件 在需要监听input输入值改变的时候,可以通过原声DOM对象的事件oninput/onchange/onkeyup/onkeypress/onkeydown 事件来监听. 这几种事件的触发条件 事件名称 触发条件 onchange 事件会在域的内容改变时发生 oninput 事件在用户输入时触发 onkeyup 事件会在键盘按键被松开时发生 onkeypress 在按下按键时触发, 不能触发所有按键(例如:ALT, CTRL, SHIFT, ESC) onkeydo

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法

1. onchange事件监听input值变化的使用方法: <input id="test"></input> $("input").change(function(){ alert("aaa"); } 2. 网页开发时,如果有input隐藏域,通过js改变隐藏域的值,无法触发change事件. 原因:onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. 解决方法:在这种情况下,可以在改变隐藏域的值

实时监听input输入

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发.oninput 事件在主流浏览器的兼容情况如下: 从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接