實時監聽文字框內容變化程式碼例項

antzone發表於2017-03-21

本章節介紹一下如何實時監聽文字框內容的變化，也就是當文字框內容發生變化時，就會觸發指定的事件，下面就通過程式碼例項簡單介紹如何實現此功能。在IE中有onpropertychange事件，當文字框的屬性值發生改變時能夠能夠觸發此事件，不過遺憾的是，此事件只有IE瀏覽器支援。oninput事件也監聽文字框的value值得變化，但是必須是IE9和IE9以上的瀏覽器和其他標準瀏覽器才能夠支援。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function OnInput(event){
  alert("事件觸發");           
}
function OnPropChanged(event){
  if(event.propertyName.toLowerCase () == "value"){
    alert("事件觸發");  
  }
}
</script>
</head>
<body>
<input type="text" oninput="OnInput(event)" onpropertychange="OnPropChanged(event)" value="螞蟻部落" />
</body>
</html>

特別說明:

在IE9瀏覽器下有個小bug，那就是通過右鍵選單選單中的剪下和刪除命令刪除內容的時候不會觸發。

相關文章