jQuery搜尋框輸入實時進行查詢

2022-06-10 12:48:14 字數 738 閱讀 9569

在手機上,我們期望在搜尋框中輸入資料,能夠實時更新查詢出來的內容,不需要按回車。

實現方式為:

$("

.search

").bind("

input propertychange

",function(event

))

一、首先分清下面幾個概念:

onchange事件:此事件會在元素內容發生改變,且失去焦點的時候觸發。瀏覽器支援度較好。

onpropertychange事件:此事件會在元素內容發生改變時立即觸發,即便是通過js改變的內容也會觸發此事件。元素的任何屬性改變都會觸發該事件,不止是value。只有ie11以下瀏覽器支援此事件。

oninput事件:此事件會在value屬性值發生改變時觸發,通過js改變value屬性值不會觸發此事件。只有ie8以上或者谷歌火狐等標準瀏覽器支援。

二、然後我們主要是結合 html5 標準事件 oninput 和 ie 專屬事件 onpropertychange 事件來監聽輸入框值變化。

oninput 是 html5 的標準事件,對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過使用者介面發生的內容變化非常有用,在內容修改後立即被觸發,不像 onchange 事件需要失去焦點才觸發。不過oninput 事件在 ie9 以下版本不支援,需要使用 ie 特有的 onpropertychange 事件替代。所以就有了以上的寫法。

jquery實現 實時提醒文字框輸入狀態

大家在網頁上註冊乙個賬號時,經常會看到如果使用者名稱或者密碼輸入不符合規則,則會在文字框旁邊即時提醒 x 或者 輸入錯誤 等 那麼這種效果是怎麼實現的呢?接下來大家請看 jquery 請大家自行引入 jquery 請看下面 function form input blur function else...

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

如圖,常用於搜尋驗證等。js實現的文字框內容發生改變立馬觸發事件簡單介紹 如何在文字框的內容發生變化的時候,立馬觸發乙個事件執行響應的操作,而不是像是keydow或者keyup事件一樣,只能夠檢測通過鍵盤輸入導致內容的變化,下面就通過 例項做一下簡單介紹。一.相關知識準備 1.onchange事件 ...

js jquery 實時監聽輸入框值

1 先說jquery,使用jquery庫的話,只需要同時繫結 oninput 和 onpropertychange兩個事件就可以了,示例 username bind inputpropertychange function 2 對於js原生寫法而言,oninput 是html5的標準事件,對於檢測 ...