飞龙博客

妙法莲华经

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

feilong.org 修订于2018-12-17 03:40:24

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

在网页前端开发中经常会碰到需要动态监听输入框值变化的情况。因此飞龙整理了一下HTML5 oninput实时监听输入框值变化解决方案。怎么用js实时监听输入框值变化?比如 textarea, input:text, input:password 和 input:search ,在内容发生修改后立即被触发事件,该怎么做呢?

如果用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 监听输入框内容变化js代码:

1、使用原生js的示例代码如下:

	 <input id="feilong" type="text" value="文本框" />
	 <script>
		 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);
			}
		 }
	</script>

2、使用jQuery的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码如下:

	 <input id="feilong" type="text" value="文本框" />
	 <script>
		$('#feilong').on('input propertychange', function(ev){
			console.log($(this).val().length);
		});
	</script>

更新网址:http://feilong.org/html5-oninput-watch-change
最初发布:20181217 03:39:00 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 前端开发

旧文:

阿吉客自行车
飞龙前端QQ群