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 字符，應使用 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://www.fzitv.net/article/173684.htm（微信內(nèi)置開發(fā) iOS修改鍵盤“換行”為“搜索”）
以上這篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
最近在工作中遇到的一個需求，需要在vue-cli建立的應用中引入jquery的方式，通過查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁應用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要介紹了vue和uniapp頁面實現(xiàn)自動滾動到最底部方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要為大家詳細介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要為大家詳細介紹了vue-pdf實現(xiàn)文件在線預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個 mixin 方法，這個方法會在每個組件創(chuàng)建之前被調(diào)用，我們可以在這個方法中將 VueRouter 實例掛載到 Vue 實例上，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求（調(diào)接口API），獲取響應信息的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue2導航根據(jù)路由傳值,而改變導航內(nèi)容的實例
下面小編就為大家?guī)硪黄獀ue2導航根據(jù)路由傳值,而改變導航內(nèi)容的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要給大家介紹了關(guān)于Vue使用Three.js加載glTF模型的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-06-06