vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件
目的：掉起來右下角為搜索的按鈕
步驟：
1、input的type改為search，再寫keydown按下時的事件調(diào)取搜索事件的方法
這樣安卓手機(jī)上回車就變成了“搜索”，不過ios仍然是換行
2、input 外面套form，必須要有action，action=“javascript:return true”
我的項(xiàng)目用van：想彈出數(shù)字鍵盤，并監(jiān)聽搜索（換行），在安卓上執(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ǔ)充知識：在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="請輸入">
</form>
想要實(shí)現(xiàn)如圖‘換行'變‘搜索'：
<form action="javascript:return true">
<input type="search" placeholder="請輸入姓名">
</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="請輸入數(shù)字1">
這時候如果如下代碼把input標(biāo)簽放到表單標(biāo)簽內(nèi),則直接顯示26鍵帶有標(biāo)點(diǎn)符號的數(shù)字鍵盤：
<form action="javascript:return true">
<input type="number" placeholder="請輸入數(shù)字2"> <!--顯示26鍵數(shù)字鍵盤，帶有標(biāo)點(diǎn)符號-->
</form>
以上這篇vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中我們可以通過行內(nèi)樣式進(jìn)行動態(tài)修改樣式,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用定義好的變量設(shè)置css樣式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧2017-10-10
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue使用exceljs導(dǎo)出excel文件的詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue如何使用exceljs導(dǎo)出excel文件的詳細(xì)教程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
本篇文章主要介紹了vue-router跳轉(zhuǎn)頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過點(diǎn)擊空白頁面來讓彈窗隱藏,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue echarts 實(shí)現(xiàn)離線中國地圖的示例代碼(細(xì)化到省份)
這篇文章主要介紹了Vue echarts 實(shí)現(xiàn)離線中國地圖,細(xì)化到省份,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue中的嚴(yán)格模式如何取消，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)注冊頁面的用戶交互的相關(guān)知識,文中的示例代碼講解詳細(xì),對我們深入掌握vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-09-09