JavaScript input 事件

小灰灰 2020-06-02 14:14 715阅读 0赞

# JavaScript input 事件

input 事件会在 `<input>`、`<select>` 和 `<textarea>` 等元素的值发生改变时触发。

此事件会在值改变的时候同步触发，功能与 propertychange 事件类似。

非表单元素添加 contenteditable 属性，修改其中内容，input 事件会触发。

通过 JavaScript 动态修改 value 值，此事件不会触发。

propertychange 事件仅低版本 IE 浏览器支持。

**浏览器支持:**

（1）.IE9+浏览器支持此事件。

（2）.edge浏览器支持此事件。

（3）.火狐浏览器支持此事件。

（4）.Opera浏览器支持此事件。

（5）.谷歌浏览器支持此事件。

（6）.safria浏览器支持此事件。

**代码实例:**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script> 
window.onload=function(){
  let otxt=document.querySelector("#txt");
  let odiv=document.querySelector("#show");
  let count=0;
  otxt.oninput=function(){
    odiv.innerHTML=++count;
  }
}
</script> 
</head> 
<body> 
<input type="text" id="txt"/>
<div id="show"></div>
</body> 
</html>
```

每一次改变input文本框的值，事件就会触发一次。

这一点与change事件区别很大，如果是change事件，必须修改文本框的值之后，焦点离开文本框，且修改前与修改后的值必须发生改变，才会触发change事件，input事件是同步触发。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script> 
window.onload=function(){
  let ost=document.querySelector("#st");
  let odiv=document.querySelector("#show");
  let count=0;
  ost.oninput=function(){
    odiv.innerHTML=++count;
  }
}
</script> 
</head> 
<body> 
<select id="st">
  <option>蒲公英云一</option>
  <option>蒲公英云二</option>
  <option>蒲公英云三</option>
  <option>蒲公英云四</option>
</select>
<div id="show"></div>
</body> 
</html>
```

当切换select下拉菜单选中项的时候，此事件会触发。

需要特别注意的是，必须是切换不同的项才会触发事件，连续选中相同的项不会触发此事件。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#ant{
  width:150px;
  height:60px;
  background-color:#ccc;
}  
</style>  
<script> 
window.onload=function(){
  let ant=document.querySelector("#ant");
  let odiv=document.querySelector("#show");
  let count=0;
  ant.oninput=function(){
    odiv.innerHTML=++count;
  }
}
</script> 
</head> 
<body> 
<div id="ant" contenteditable="true"></div>
<div id="show"></div>
</body> 
</html>
```

div元素本来是不可编辑的，HTML5新增contenteditable。

将其属性值设置为true，即可实现div等元素可编辑性，当编辑div中的内容时，input事件触发。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#ant{
  width:150px;
  height:60px;
  background-color:#ccc;
}  
</style>  
<script> 
window.onload=function(){
  let ant=document.querySelector("#ant");
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  let count=0;
  ant.oninput=function(){
    odiv.innerHTML=++count;
  }
  obt.onclick=function(){
    ant.innerHTML="蒲公英云";
  }
}
</script> 
</head> 
<body> 
<div id="ant" contenteditable="true"></div>
<input type="button" id="bt" value="修改内容">
<div id="show"></div>
</body> 
</html>
```

通过JavaScript动态修改元素的内容或者表单元素的值，并不会触发input事件。

所以上述代码中，点击按钮虽然修改了div中的内容，但是count的值并没有发生变化。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  var oshow=document.getElementById("show");
  var count=0;
  if(document.all){
     otxt.onpropertychange=function(){
       count=count+1;
       oshow.innerHTML=count;
     }
  }
  else{
    otxt.oninput=function(){
      count=count+1;
      oshow.innerHTML=count;
    }
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="蒲公英云"/>
</body>
</html>
```

上述代码，当改变input文本框值的时候实现数字加1。

利用propertychange事件实现了全兼容效果。