即時搜尋或input實時檢測監聽輸入框變化

2021-09-07 07:17:11 字數 1883 閱讀 7932

如圖,常用於搜尋驗證等。

js實現的文字框內容發生改變立馬觸發事件簡單介紹:

如何在文字框的內容發生變化的時候,立馬觸發乙個事件執行響應的操作,而不是像是keydow或者keyup事件一樣,只能夠檢測通過鍵盤輸入導致內容的變化, 下面就通過**例項做一下簡單介紹。

一.相關知識準備:

1.onchange事件:

此事件會在元素內容發生改變,且失去焦點的時候觸發。

瀏覽器支援度較好。

2.onpropertychange事件:

此事件會在元素內容發生改變時立即觸發,即便是通過js改變的內容也會觸發此事件。

元素的任何屬性改變都會觸發該事件,不止是value。

只有ie11以下瀏覽器支援此事件。

3.oninput事件:

此事件會在value屬性值發生改變時觸發,通過js改變value屬性值不會觸發此事件。

只有ie8以上或者谷歌火狐等標準瀏覽器支援。

二.**例項:

既然知道各個事件的特性,那麼我們可以通過相容性方法,實現相容各個瀏覽器的**。

**如下:

"show

">

"text

" id="

txt" value="測試

"/>

$(function())

});

keypress  就是能監聽鍵盤事件,滑鼠複製黏貼操作他就無能為力

change事件  觸發事件必須滿足兩個條件:

a)當前物件屬性改變,並且是由鍵盤或滑鼠事件激發的(指令碼觸發無效)

b)當前物件失去焦點(onblur)

--------------------------------------分割線 -------------------------------------- 

之前一直用change事件來監聽輸入框內容是否發生變化,只有當輸入框失去焦點時才會觸發,沒想到html5還有個input事件,只要輸入框內容發生變化就會立即觸發,既然有這麼好的東西我們幹嘛放著不用呢,接下來就來給大家介紹一下:

如果我們頁面上有這樣乙個簡單到極致的輸入框:

那麼我們現在用jquery給它繫結input事件,如下:

$("input:text").bind("input propertychange",function());

這樣一來只要輸入框內容發生變化,都會立即列印出裡面字串的長度來了。

需要注意的是input事件是html5的東東,ie9以下版本中是無法支援的,所以需要用propertychange事件來代替。

input事件除了能夠監聽input:text元素的內容變化,同時還可以監聽input:password,input:search以及textarea這幾個元素,在html繫結的寫法為:

--------------------------------------分割線 -------------------------------------- 

html5 地理位置定位(html5 geolocation)原理及應用 

html5移動開發即學即用(雙色) pdf+原始碼 

html5入門學習筆記 

html5移動web開發筆記 

html5 開發中的本地儲存的安全風險 

《html5與css3權威指南》及相配套原始碼 

關於 html5 令人激動的 10 項** 

html5與css3實戰指南 pdf 

--------------------------------------分割線 --------------------------------------

Js jQuery實時監聽input輸入框值變化

前言在做web開發時候很多時候都需要即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強 的使用者體驗感。而採用onchange時間又往往是在輸入框失去焦點 onblur 時候觸發,有時候並不能滿足條件。首先看一下dom中元素事件 onpropertychange ie下,當乙個html元素的屬...

Js實時監聽input輸入框值變化

注意事項 onpropertychange ie下,當乙個html元素的屬性改變的時候,都能通過 onpropertychange來即時捕獲。onchange在屬性值改變時還必須使得當前元素失去焦點 onblur 才可以啟用該事件。在用js指令碼改動該元素值時候亦能觸發onpropertychang...

js監聽input輸入框值的實時變化

注 1 2 為其他文章的說明 1 在元素上同時繫結 oninput 和onporpertychanger事件 例 2 使用原生js新增監聽事件 3 使用jquery方法繫結事件 在監聽到 onpropertychange 事件後,可以使用 event 的 propertyname 屬性來獲取發生變化...