input onchange事件不触发 oninput onpropertychange onchange 实时监听

做前端的同学，经常会跟输入框打交道，免不了要做实时监听文本输入的需求。

Android中实现

obj.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {...}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {...}@Overridepublic void afterTextChanged(Editable s) {... }});android中有直接可使用的api,毫无难度。

H5/React中实现

刚转到前端开发时，想当然地以为可以直接套用onchange事件，还别说首次直接用后，还真是能实时监听文本输入的，但后面发现是有前提条件的， 那就是要求input的type=”text”时才会实时回调，其他的type比如number,tel,password等触发回调还需要另外一个条件就是同时得失去焦点。

总结：onchange事件在针对type="text"时，只要前后内容有改变，就会实时触发回调。其他type，则相当于严格版的onblur的事件，既要求前后内容有改变并且还得失去焦点。

下面提供完美的解决方案：

总结：

oninput事件

oninput 事件在主流浏览器的兼容情况如上图，可以看出事件在 IE9 以下版本不支持，需要使用 IE 特有的onpropertychange事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发。

下面是针对jquery与js原生的不同写法

jquery库 //同时绑定oninput 和 onpropertychange 两个事件

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

console.log($(this).val());

});js原生

静态注册<script type="text/javascript">//非Iefunction OnInput (event) {console.log(event.target.value);}//Iefunction OnPropChanged (event) {if (event.propertyName.toLowerCase () == "value") {console.log(event.srcElement.value);}}</script><input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" />----------js动态注册obj.addEventListener("input",function(){console.log(event.target.value)});// Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。不支持的浏览器可使用 attachEvent() 方法替代。if (document.addEventListener) { //所有主流浏览器，除了 IE 8 及更早 IE版本document.addEventListener("click", myFunction);} else if (document.attachEvent) { // IE 8 及更早 IE 版本document.attachEvent("onclick", myFunction);}----------obj.oninput=function(){console.log(event.target.value)};

小结oninput与onpropertychange失效的情况：

（1）oninput事件：1. 通过脚本中改变value时，不会触发；2. 从浏览器的自动下拉提示中选取时，不会触发。

（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

如果觉得《input onchange事件不触发 oninput onpropertychange onchange 实时监听》对你有帮助，请点赞、收藏，并留下你的观点哦！