H5:实时监听 input 输入框的值变化

时间:2022-08-23 09:58:37

(1)jquery:只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了。

$('#input').bind('input propertychange', function() {

       alert("我是实时监听哦")

});

(2)oninput 是 HTML5 的标准事件

对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。

浏览器兼容如下:

chorme,firefox2,IE9,opera10,safari

IE浏览器处理办法:

 IE 特有的 onpropertychange 事件替代

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。

修改了 select 元素的选中项,selectedIndex 属性发生变化。

在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,event.propertyName

 <input type="text" oninput=" " onpropertychange=""  value="Text field" />

获取更多的文章,欢迎关注微信公众号

H5:实时监听 input 输入框的值变化