淺析html input 等值改變添加監聽事件

2020-03-24 17:01:52

字體：大中小

來源：轉載

供稿：網友

要達到的效果
很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。比如即時顯示輸入框已經被輸入的字節數，或者即時讀取輸入的值來進行搜索引導，也就是google的關聯搜索效果等。
只要我們能捕獲即時事件就能做到很多事情。
需要了解的知識
首先，我們需要了解onchange和onpropertychange的不同：

IE下，當一個html' target='_blank'>HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以激活該事件。

了解這一點后我們發現onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢？

經過翻閱資料得知，在其他瀏覽器下可以使用oninput事件來達到同樣的效果，真是太好了，我們只需要把IE瀏覽器區分出來就可以。

oninput的使用

下面我們先了解一下oninput如何使用。
如果您是將注冊時間直接寫在頁面里面，那么如下寫法就可以實現：
、input type= text name= textfield oninput= alert(this.value); onpropertychange= alert(this.value) /

但是，將oninput寫在JS代碼中分離出來時與普通事件注冊的方法有些不同，必須使用addEventListener來注冊。

attachEvent和addEventListener 的不同

說到這里我們再來了解一下 attachEvent和addEventListener 的使用方法：

attachEvent方法，為某一事件附加其它的處理事件。（不支持Mozilla系列）
addEventListener方法用于 Mozilla系列

舉例:
XML/HTML Code復制內容到剪貼板
執行順序為method3- method2- method1如果是Mozilla系列，并不支持該方法，需要用到addEventListener
XML/HTML Code復制內容到剪貼板
了解了如何使用addEventListener來注冊oninput事件后我們再回到要解決的問題[劃分瀏覽器]。判斷IE瀏覽器如何將IE區分出來呢？
這似乎是一個老生常談的問題，網絡中有很多找那個方法，歸類為兩類：
其一，是判斷瀏覽器的功能屬性。
其二，就是判斷傳統的 user-agent 字符串，這可能是最古老也是最流行的檢測方式。
在這里就不做深入了解了，我們這里用一種比較簡單的方法來判斷
XML/HTML Code復制內容到剪貼板
到目前為止我們遇到的問題就已經解決了，開始寫代碼來測試我們的思路是否能夠實現。以上這篇淺析html input 等值改變添加監聽事件就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持phpstudy。原文地址：http://www.web600.net/html/editor/JavaScript/201001131529.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5之網頁存儲

下一篇：html applet標簽是什么意思？html applet標簽的用法詳解