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