js中input标签内容改变的触发事件

时间：2024-02-20 16:33:02

js中input标签内容改变的触发事件

 

    web前端中经常需要获取input标签value值变化的事件。下面几个事件可以满足这个需求。

 

1. onchange事件与onpropertychange事件的区别：

　　onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。

2. oninput事件与onpropertychange事件的区别：

　　oninput事件是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触发；onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方法与一般事件相同。

3. oninput与onpropertychange失效的情况：

oninput事件：

　　（1）当脚本中改变value时，不会触发；

　　（2）从浏览器的自动下拉提示中选取时，不会触发；

onpropertychange事件：

　　当input设置为disable=true后，不会触发。

 

 

  在value改变时实时触发实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p>在文本框中尝试输入触发函数。</p>
<input type="text" id="myInput" oninput="myFunction()" onclick="locationInput">
<p id="demo"></p>
<script type="text/javascript">
    window.onload = function () {
        locationInput = function () {
                            ....
        };
    }
</script>

<script>
function myFunction() {
    var x = document.getElementById("myInput").value;
    document.getElementById("demo").innerHTML = "你输入的是: " + x;
}
</script>
 
</body>
</html>

 

 

博客搬运地址：

  1. js中input标签内容改变的触发事件

相关文章