1. 程式人生 > >vue 移動端鍵盤搜尋事件監聽

vue 移動端鍵盤搜尋事件監聽

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的叫換行,對於客戶體驗而言,非常不好,能不能修改軟鍵盤的文案呢,答案是肯定的,解決辦法移步另一篇文章。