vue 項目軟鍵盤回車觸發(fā)搜索事件
目的:掉起來右下角為搜索的按鈕
步驟:
1、input的type改為search,再寫keydown按下時的事件調(diào)取搜索事件的方法
這樣安卓手機上回車就變成了“搜索”,不過ios仍然是換行
2、input 外面套form,必須要有action,action=“javascript:return true”
我的項目用van:想彈出數(shù)字鍵盤,并監(jiān)聽搜索(換行),在安卓上執(zhí)行搜索按鈕,在ios 執(zhí)行blur,因為安卓上點完成不執(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 }
補充知識:在ios中,input喚出軟鍵盤中‘換行'轉(zhuǎn)‘搜索'、‘前往',及直接喚醒數(shù)字鍵盤的實現(xiàn)(vue)
如下所示:
<input type="text" />
或
<form> <input type="text" placeholder="輸入"> </form>
軟鍵盤顯示的都是
想要實現(xiàn)如圖‘換行'變‘前往':
代碼如下:
<form action="javascript:return true"> <input type="text" placeholder="請輸入"> </form>
想要實現(xiàn)如圖‘換行'變‘搜索':
<form action="javascript:return true"> <input type="search" placeholder="請輸入姓名"> </form>
重點:
1:放在form標簽內(nèi)。
2:在form標簽內(nèi)加上action=”javascript:return true”
直接喚醒數(shù)字鍵盤
直接喚醒數(shù)字九鍵的鍵盤:
<input type="text" pattern="[0-9]*" placeholder="請輸入數(shù)字1">
這時候如果如下代碼把input標簽放到表單標簽內(nèi),則直接顯示26鍵帶有標點符號的數(shù)字鍵盤:
<form action="javascript:return true"> <input type="number" placeholder="請輸入數(shù)字2"> <!--顯示26鍵數(shù)字鍵盤,帶有標點符號--> </form>
以上這篇vue 項目軟鍵盤回車觸發(fā)搜索事件就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0+koa2+mongodb實現(xiàn)注冊登錄
這篇文章主要介紹了vue2.0+koa2+mongodb實現(xiàn)注冊登錄功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06一篇看懂vuejs的狀態(tài)管理神器 vuex狀態(tài)管理模式
一篇看懂vuejs的狀態(tài)管理神器,Vuex一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細講講,希望對大家有所幫助2023-10-10