原生js监听input值发生变化

原生JS中可以使用oninput,onpropertychange,onchange

oninput，onpropertychange，onchange的用法

1） onchange 触发事件必须满足两个条件：

a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

b）当前对象失去焦点(onblur)；

2） onpropertychange ，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

3） oninput 是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

亲自测试

Ie9以下通过 onpropertychange能监听到input值的改变

在Ie9，及其以上和谷歌浏览器测试时通过 oninput 来监测值的改变

JQuery

通过bind方法来监听input值发生改变


$("#inputs").bind('input propertychange',function(e){console.log($(this).val())
})

用的bind，当遇到追加的新input标签时，则不能监听了,可以使用live替代

$('input').live('input propertychange', function()
{//获取input 元素,并实时监听用户输入//逻辑
})

转载于:https://www.cnblogs.com/Tohold/p/10452869.html

原生js监听input值发生变化相关推荐

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法
1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
原生js监听手机返回键
创建人:hu_time 描述:js监听手机返回键普通页面跳转,监听返回上一页: document.addEventListener("plusready", function() ...
原生js监听滚动条_原生JS实现滚动条监听
本文主要利用原生的javascript实现滚动条事件的监听,主要涉及的知识: (1)利用React组件渲染一个UI页面 (2)实现锚点链接 (3)实现滚动条onscroll事件其中,利用React渲 ...
js监听select值变化_网络编程——C++实现socket通信(TCP)高并发之select模式
相关函数: 服务端: socket() bind() listen() FD_ZERO()等辅助函数 select() 高并发select模式 accept() read() 或 recv()等 wr ...
jq监听input值改变时的事件
业务中常有监视input值变化的需要,今天我在解决这个问题后,在这里对解决方案做个汇总: 通常采用的方法如: $(input).keyup(function(){ //do sth }); 当有输入时 ...
jquery监听input值改变
1. 正常情况 $("input[name=age]").bind('input propertychange',function(){var a = $(this) ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...

原生js监听input值发生变化

原生js监听input值发生变化相关推荐

最新文章

热门文章