JS 判断input标签值变化(三种方式)

1、onchange 监听 input 值变化

(1)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
(2)当前对象失去焦点(onblur);

inputs.onchange = function(){
	console.log(inputs.value);
}

运行结果:只有对象失去焦点时,才会打印 input 的值
在这里插入图片描述
在这里插入图片描述

2、onpropertychange 监听 input 值变化

只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

inputs.onpropertychange = function(){
	console.log(inputs.value);
}
    运行结果:![在这里插入图片描述](https://img-blog.csdnimg.cn/e3dbcab1cd4d47a981a27000dc6bb035.png)

在这里插入图片描述

3、oninput 监听 input 值变化

是onpropertychange的非IE浏览器版本,支持 firefox和opera 等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

inputs.oninput = function(){
	console.log(inputs.value);
}

运行结果:
在这里插入图片描述
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐