vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽
更新時間：2019年11月06日 15:31:46 作者：董瑞南
今天小編就為大家分享一篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、首先注意，input的type="serch"
<input @keypress="searchGoods" type="serch" placeholder="搜索商品">
2、監(jiān)聽keypress事件
（1）KeyDown、KeyUp 事件
這些事件是當一個對象具有焦點時按下 ( KeyDown ) 或松開 ( KeyUp ) 一個鍵時發(fā)生的。（要解釋 ANSI 字符，應(yīng)使用 KeyPress 事件。）
（2）KeyPress 事件
此事件當用戶按下和松開一個 ANSI 鍵時發(fā)生。
3、阻止事件默認行為
methods中添加 searchGoods方法，
判斷keyCode ==13
阻止默認事件（默認是換行）
通過event.target.value獲取要搜索的值，調(diào)用搜索接口。
searchGoods(event) {
if (event.keyCode == 13) { //如果按的是enter鍵 13是enter
event.preventDefault(); //禁止默認事件（默認是換行）
console.log(event.target.value)
Toast("點擊了確認")
}
}
4、大家在項目中會發(fā)現(xiàn)，ios上系統(tǒng)軟鍵盤，keycode=13的叫換行，對于客戶體驗而言，非常不好，能不能修改軟鍵盤的文案呢，答案是肯定的，解決辦法移步另一篇文章。
http://chabaoo.cn/article/173684.htm（微信內(nèi)置開發(fā) iOS修改鍵盤“換行”為“搜索”）
以上這篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下2018-11-11
vue3.0使用mapState,mapGetters和mapActions的方式
這篇文章主要介紹了vue3.0使用mapState,mapGetters和mapActions的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
element-ui配合node實現(xiàn)自定義上傳文件方式
這篇文章主要介紹了element-ui配合node實現(xiàn)自定義上傳文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
TypeError:res.forEach?is?not?a?function報錯解決辦法
這篇文章主要給大家介紹了關(guān)于TypeError:res.forEach?is?not?a?function報錯的解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
在項目開發(fā)中經(jīng)常需要處理重復(fù)點擊導(dǎo)致多次調(diào)用接口的問題,這篇文章主要介紹了項目中如何使用axios過濾多次重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2021-07-07
解決axios發(fā)送post請求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請求返回400狀態(tài)碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實例形式對比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了基于vue使用canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue配置文件實現(xiàn)代理v2版本的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06