当前位置:   article > 正文

JS 判断input标签值变化_js监听input值变化

js监听input值变化

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

1、onchange 监听 input 值变化

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

inputs.onchange = function(){
	console.log(inputs.value);
}
  • 1
  • 2
  • 3

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

2、onpropertychange 监听 input 值变化

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

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

在这里插入图片描述

3、oninput 监听 input 值变化

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

inputs.oninput = function(){
	console.log(inputs.value);
}
  • 1
  • 2
  • 3

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/796939
推荐阅读
相关标签
  

闽ICP备14008679号