飞龙博客

妙法莲华经

HTML5 oninput实时监听输入框值变化解决方案

feilong.org 修订于2021-01-22 04:13:50 1,422 次浏览

在网页前端开发中经常会碰到需要动态监听输入框值变化的情况。怎么用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的示例代码如下:


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 两个事件。

飞龙写示例代码如下:


$('#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 教程

新作:

旧文: