飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2021-01-22 04:13 加入书签 CTRL+D 有 1,023 个朋友来过

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

飞龙初发:
2018-12-17 03:39
本文更新网址:
https://feilong.org/html5-oninput-watch-change

所在目录: js 教程

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python