input事件中文觸發多次問題研究

2022-06-25 22:30:20 字數 2046 閱讀 9340

**:

我們在網頁中經常會遇到實時搜尋的情況,或者其他類似需要input實時響應的問題,一般情況下,我們是利用input和propertychange事件來監聽input內容的變化來響應,但是有乙個問題就是當輸入漢字的時候,可能我們要輸入 『實時』 的時候,我們的input框中會出現 'shishi'直到我們的空格才會變成 '實時',這也就意味著我們依次響應了 's','sh','shi','shis','shish','shishi','實時',前面的結果明顯不是我們需要的 ,造成了我們很多次無用的提交,如果是介面請求,那更要命,多發了好多次請求。

最早之前有乙個稍微能改善的解決方案就是配合乙個定時器延時執行,這樣能減少請求次數,但是這個減少是不分情況的減少 ,還是治標不治本。

今天偶然看到幾個事件,發現可以完美解決這種問題。我們來看一下這幾個事件

compositionstart , compositionupdate ,compositionend  

compositionstart 官方解釋 : 觸發於一段文字的輸入之前(類似於 keydown 事件,但是該事件僅在若干可見字元的輸入之前,而這些可見字元的輸入可能需要一連串的鍵盤操作、語音識別或者點選輸入法的備選詞),通俗點,假如我們要輸入一段中文,當我們按下第乙個字母的時候觸發 。

相應的compositionupdate在我們中文開始輸入到結束完成的每一次keyup觸發。

而compositionend則在我們完成當前中文的輸入觸發 。

正題來了,通過上面的事件我們就可以完美的解決中文輸入的響應問題了,從compositionstart觸發開始,意味著中文輸入的開始且還沒完成,所以此時我們不需要做出響應,在compositionend觸發時,表示中文輸入完成,這時我們可以做相應事件的處理。

所以我們可以設定乙個變數,或者給input定義乙個屬性,在compositionstart到compositionend之間對input事件不做出響應。看以下** 

$('input').on(, 

compositionstart :

function

(e),

compositionend :

function

(e) })

function

response()

我們通過compositionstart,compositionend事件來設定flag,判斷是否正在進行輸入中文以控制input事件的響應,看上去沒有問題,但實際執行時會發現在谷歌瀏覽器中input執行順序要先於compositionend,火狐執行順序正常,但compositionend會響應兩次。這就導致谷歌瀏覽器中輸入漢字不會響應input事件。當然也可以在compositionend事件中再執行一次response事件,這樣的問題是在火狐瀏覽器中會多執行一次response,顯然不是最優方案。

經過試驗,發現keyup和compositionend事件執行順序在各大瀏覽器都保持一致,於是我們改成如下**:

$('input').on(, 

compositionstart :

function

(e),

compositionend :

function

(e) })

function

response()

這樣在各個瀏覽器基本保持一致了(相容compositionstart的瀏覽器)。但是keyup有乙個問題,比如通過滑鼠複製貼上的時候並不相應keyup事件,所以上面的事情我們還需要再優化下,keyup相應按鍵事件,input響應除了keyup之外的變化事件。**如下

$('input').on(, 

keydown :

function

(e),

input :

function

(e)

}, compositionstart :

function

(e),

compositionend :

function

(e) })

function

response()

一次點選觸發多次事件問題

在ajax請求成功的方法裡寫click事件,實現顯示隱藏功能,但結果點選一次,可能觸發多次顯示隱藏的切換,後採用先解綁click事件再繫結click事件的方法解決掉,ps unbind後新增click,不要寫明方法,不然還是會出現上述問題。如下 store value drop down each ...

input 內容改變的觸發事件

1.onchange onchange 事件會在域的內容改變時觸發。支援的標籤,注意 在元素的值改變了且失去焦點時觸發 兩次的值一樣不會觸發 缺陷 通過js 改變dom的值不會觸發,解決在js 裡改值了呼叫其change 的function 或者調.change 方法。js function jqu...

input標籤內容改變的觸發事件

1.onchange事件與onpropertychange事件的區別 onchange事件在內容改變 兩次內容有可能相等 且失去焦點時觸發 onpropertychange事件是實時觸發,每增加或刪除乙個字元就會觸發,通過js改變也會觸發該事件,但是該事件是ie專有。2.oninput事件與onpr...