HTML5 oninput实时监听输入框值变化解决方案
feilong.org 修订于2021-01-22 04:13:50 1,661 次浏览在网页前端开发中经常会碰到需要动态监听输入框值变化的情况。怎么用js实时监听输入框值变化？比如 textarea, input:text, input:password 和 input:search ，在内容发生修改后立即被触发事件，该怎么做呢？
因此飞龙整理了一下HTML5 oninput实时监听输入框值变化解决方案。让HTML5 oninput事件来实时监听输入框值变化解决方案。
如果用 onchange 事件，需要输入后再失去焦点才触发 onchange 事件。
如果使用 onkeydown、onkeypress、onkeyup 键盘事件，监听不了右键的复制、剪贴和粘贴，处理组合快捷键也麻烦。
主流浏览器基本支持的oninput事件。用户修改js脚本，在两种情况下 oninput事件都会触发。
但IE9以下不支持，需用 IE 特有的 onpropertychange 事件代替。
如果修改 input:checkbox 或者 input:radio 元素的选择中状态，那么 checked 属性发生变化。
如果修改 input:text 或者 textarea 元素的值，那么value 属性发生变化。
如果修改 select 元素的选中项，那么selectedIndex 属性发生变化。
如果监听到onpropertychange事件，那么可使用 event 的 propertyName 属性，来获取发生变化的属性名称。
以下是例子 oninput 与 onpropertychange 监听输入框内容变化。
1、我使用原生js的示例代码如下：
|
1 |
<input id="feilong" type="text" value="文本框" /> |
|
1 2 3 4 5 6 7 |
var feilong=window.document.getElementById('feilong'); feilong.oninput=function(ev){console.log('feilong.value=',feilong.value);} feilong.onpropertychange=function(ev){ if (event.propertyName.toLowerCase()=='value'){ console.log('feilong.value=',event.srcElement.value); } } |
2、如果使用jQuery的，那么只需同时绑定 oninput 和 onpropertychange 两个事件。
飞龙写示例代码如下：
|
1 |
<input id="feilong" type="text" value="文本框" /> |
|
1 2 3 |
$('#feilong').on('input propertychange', function(ev){ console.log($(this).val().length); }); |
更新网址：https://feilong.org/html5-oninput-watch-change
最初发布：20181217 03:39:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： js 教程