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

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

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

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

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

下面提供完美的解决方案:
总结:
oninput 事件
input onchange事件不触发 oninput onpropertychange onchange 实时监听_第1张图片
oninput 事件在主流浏览器的兼容情况如上图,可以看出事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发。
下面是针对jquery与js原生的不同写法

  1. jquery库 //同时绑定oninput 和 onpropertychange 两个事件
    $('xx').bind('input propertychange', function() {
    console.log($(this).val());
    });
  2. js原生
静态注册

                    
                    

你可能感兴趣的:(前端,oninput,onc,实时监听文本输入,onchange事件不触发)