vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件
目的：掉起來(lái)右下角為搜索的按鈕
步驟：
1、input的type改為search，再寫(xiě)keydown按下時(shí)的事件調(diào)取搜索事件的方法
這樣安卓手機(jī)上回車就變成了“搜索”，不過(guò)ios仍然是換行
2、input 外面套form，必須要有action，action=“javascript:return true”
我的項(xiàng)目用van：想彈出數(shù)字鍵盤，并監(jiān)聽(tīng)搜索（換行），在安卓上執(zhí)行搜索按鈕，在ios 執(zhí)行blur，因?yàn)榘沧可宵c(diǎn)完成不執(zhí)行blur
<form @submit.prevent="formSubmit" action="javascript:return true">
<van-field
v-model='deviceCode'
type='tel'
placeholder="輸入設(shè)備唯一碼"
clearable
@blur="blur"
@keydown="search($event)"
/>
</form>
formSubmit () {
return false
}
補(bǔ)充知識(shí)：在ios中，input喚出軟鍵盤中‘換行'轉(zhuǎn)‘搜索'、‘前往'，及直接喚醒數(shù)字鍵盤的實(shí)現(xiàn)（vue）
如下所示：
<input type="text" />
或
<form>
<input type="text" placeholder="輸入">
</form>
軟鍵盤顯示的都是
想要實(shí)現(xiàn)如圖‘換行'變‘前往'：
代碼如下：
<form action="javascript:return true">
<input type="text" placeholder="請(qǐng)輸入">
</form>
想要實(shí)現(xiàn)如圖‘換行'變‘搜索'：
<form action="javascript:return true">
<input type="search" placeholder="請(qǐng)輸入姓名">
</form>
重點(diǎn)：
1：放在form標(biāo)簽內(nèi)。
2：在form標(biāo)簽內(nèi)加上action=”javascript:return true”
直接喚醒數(shù)字鍵盤
直接喚醒數(shù)字九鍵的鍵盤：
<input type="text" pattern="[0-9]*" placeholder="請(qǐng)輸入數(shù)字1">
這時(shí)候如果如下代碼把input標(biāo)簽放到表單標(biāo)簽內(nèi),則直接顯示26鍵帶有標(biāo)點(diǎn)符號(hào)的數(shù)字鍵盤：
<form action="javascript:return true">
<input type="number" placeholder="請(qǐng)輸入數(shù)字2"> <!--顯示26鍵數(shù)字鍵盤，帶有標(biāo)點(diǎn)符號(hào)-->
</form>
以上這篇vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用element-ui的el-image的問(wèn)題分析
這篇文章主要介紹了vue使用element-ui的el-image的問(wèn)題分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue2.0+koa2+mongodb實(shí)現(xiàn)注冊(cè)登錄
這篇文章主要介紹了vue2.0+koa2+mongodb實(shí)現(xiàn)注冊(cè)登錄功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue動(dòng)態(tài)注冊(cè)組件實(shí)例代碼詳解
寫(xiě)本篇文章之前其實(shí)也關(guān)注過(guò)vue中的一個(gè)關(guān)于加載動(dòng)態(tài)組件is的API，最開(kāi)始研究它只是用來(lái)實(shí)現(xiàn)一個(gè)tab切換的功能,需要的朋友可以參考下2019-05-05
vue調(diào)試工具vue-devtools的安裝全過(guò)程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式
一篇看懂vuejs的狀態(tài)管理神器，Vuex一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
在vue項(xiàng)目中設(shè)置一些全局的公共樣式
這篇文章主要介紹了在vue項(xiàng)目中設(shè)置一些全局的公共樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)星空效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標(biāo)的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開(kāi)發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下2023-07-07
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10