vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽

發(fā)布時(shí)間：2020-10-13 15:27:09 來源：腳本之家閱讀：302 作者：董瑞南欄目：web開發(fā)

1、首先注意，input的type="serch"

<input @keypress="searchGoods" type="serch" placeholder="搜索商品">

2、監(jiān)聽keypress事件

（1）KeyDown、KeyUp 事件

這些事件是當(dāng)一個(gè)對(duì)象具有焦點(diǎn)時(shí)按下 ( KeyDown ) 或松開 ( KeyUp ) 一個(gè)鍵時(shí)發(fā)生的。（要解釋 ANSI 字符，應(yīng)使用 KeyPress 事件。）

（2）KeyPress 事件

此事件當(dāng)用戶按下和松開一個(gè) ANSI 鍵時(shí)發(fā)生。

3、阻止事件默認(rèn)行為

methods中添加 searchGoods方法，

判斷keyCode ==13

阻止默認(rèn)事件（默認(rèn)是換行）

通過event.target.value獲取要搜索的值，調(diào)用搜索接口。

 searchGoods(event) { 
   if (event.keyCode == 13) { //如果按的是enter鍵 13是enter 
     event.preventDefault(); //禁止默認(rèn)事件（默認(rèn)是換行） 
     console.log(event.target.value)
     Toast("點(diǎn)擊了確認(rèn)") 
   } 
   }

4、大家在項(xiàng)目中會(huì)發(fā)現(xiàn)，ios上系統(tǒng)軟鍵盤，keycode=13的叫換行，對(duì)于客戶體驗(yàn)而言，非常不好，能不能修改軟鍵盤的文案呢，答案是肯定的，解決辦法移步另一篇文章。

https://www.jb51.net/article/173684.htm（微信內(nèi)置開發(fā) iOS修改鍵盤“換行”為“搜索”）

以上這篇vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue 實(shí)現(xiàn)移動(dòng)端鍵盤搜索事件監(jiān)聽

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽