IOS Safari 的keyup沒反應該怎麼辦

2023-05-10
針對IOS不合群的事件再添一筆:

今天客戶回報為什麼搜尋欄位在所有的裝置瀏覽器中都可以再鍵入[中文]後自己篩選內容,唯有IOS還要在按一下[換行]才可以。這裡順道提一下,[換行]這個按鈕正確翻譯應該是[輸入]或[鍵入]又或者是简体中文使用的[回車]才對,因為人家的英文是[return]。所以IOS中文鍵盤翻譯這裡可能要調整一下。

所以問題的點是,IOS提供的內鍵輸入,中文與其他不同的地方是,它無法觸發[keyup]事件。

所以這邊記錄一下,如果你要觸發文字輸入框的自動觸發事件,要避免IOS跟人家的體驗不一樣,那麼就配合一下要把[keyup]事件改成[input propertychange]這樣才行。

這邊提一下為什麼會這樣,那就是早期為了IE9以下的瀏覽器,keyup事件是沒反應的,所以要使用IE特有的onpropertychange事件才行,也就是說,在這個部分IOS的safari跟IE是一個時代的東西...,如今IE已經是過去式了,safari該跟進一下了吧! 

所以寫法應該是這樣:
document.getElementById("input").onpropertychange = keys(); 
document.getElementById("input").addEventListener("input", keys, false);
function keys(){
//觸發事件
}

JQuery的寫法比較簡單
$('input').on("input propertychange", function(){
//觸發事件
});

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【696596】
digishot webdesign studio