要想实现实时监听input输入框值的变化的效果,只需要让input元素监听两个事件:input
和propertychange
,然后调用对应的js监听函数即可。
先使用原生js代码实现。
<input type="text" oninput="onInputChange(event)" onpropertychange="onInputChange2(event)" /><script type="text/javascript">function onInputChange(event){console.log(event.target.value);}function onInputChange2(event){if(event.propertyName.toLowerCase()=="value"){console.log(event.srcElement.value);}}</script>
jQuery的实现代码要比原生js简洁很多在,这里推荐使用jQuery实现。
<input type="text" id="input" /><script type="text/javascript">$("#input").on("input propertychange",function(event){console.log($(this).val());});</script>