JavaScript input 事件

admin發表於2018-11-09
JavaScript事件

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.softwhy.com/" />
<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>


程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/09/170010vz7348bk53owe97k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

每一次改變input文字框的值，事件就會觸發一次。

這一點與change事件區別很大，如果是change事件，必須修改文字框的值之後，焦點離開文字框，且修改前與修改後的值必須發生改變，才會觸發change事件，input事件是同步觸發。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/09/170034wy4uc2t56yuykbbm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當切換select下拉選單選中項的時候，此事件會觸發。

需要特別注意的是，必須是切換不同的項才會觸發事件，連續選中相同的項不會觸發此事件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/09/170059ssguzugryjkykyzl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

div元素本來是不可編輯的，HTML5新增contenteditable。

將其屬性值設定為true，即可實現div等元素可編輯性，當編輯div中的內容時，input事件觸發。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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.softwhy.com/" />
<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事件實現了全相容效果。

相關文章