vue 移動端鍵盤搜尋事件監聽
阿新 • • 發佈:2019-02-16
1、首先注意,input的type="serch"
<input @keypress="searchGoods" type="serch" placeholder="搜尋商品">
2、監聽keypress事件
(1)KeyDown、KeyUp 事件
- 這些事件是當一個物件具有焦點時按下 ( KeyDown ) 或鬆開 ( KeyUp ) 一個鍵時發生的。(要解釋 ANSI 字元,應使用 KeyPress 事件。)
(2)KeyPress 事件
- 此事件當用戶按下和鬆開一個 ANSI 鍵時發生。
3、阻止事件預設行為
- methods中新增 searchGoods方法,
- 判斷keyCode ==13
- 阻止預設事件(預設是換行)
- 通過event.target.value獲取要搜尋的值,調用搜索介面。
searchGoods(event) {
if (event.keyCode == 13) { //如果按的是enter鍵 13是enter
event.preventDefault(); //禁止預設事件(預設是換行)
console.log(event.target.value)
Toast("點選了確認")
}
}
4、大家在專案中會發現,ios上系統軟鍵盤,keycode=13的叫換行,對於客戶體驗而言,非常不好,能不能修改軟鍵盤的文案呢,答案是肯定的,解決辦法移步另一篇文章。