目的：掉起來右下角為搜尋的按鈕

步驟：

1、input的type改為search，再寫keydown按下時的事件調取搜尋事件的方法

這樣安卓手機上回車就變成了“搜尋”，不過ios仍然是換行

2、input 外面套form，必須要有action，action=“javascript:return true”

我的專案用van：想彈出數字鍵盤，並監聽搜尋（換行），在安卓上執行搜尋按鈕，在ios 執行blur，因為安卓上點完成不執行blur

<form @submit.prevent="formSubmit" action="javascript:return true">
    <van-field
     v-model='deviceCode'
     type='tel'
     placeholder="輸入裝置唯一碼"
     clearable
     @blur="blur"
     @keydown="search($event)"
    />
</form>
formSubmit () {
 return false
}

補充知識：在ios中，input喚出軟鍵盤中‘換行'轉‘搜尋'、‘前往'，及直接喚醒數字鍵盤的實現（vue）

如下所示：

<input type="text" />

或

<form>
      <input type="text" placeholder="輸入"> 
</form>

軟鍵盤顯示的都是

想要實現如圖‘換行'變‘前往'：

程式碼如下：

<form action="javascript:return true">
    <input type="text" placeholder="請輸入">
</form>

想要實現如圖‘換行'變‘搜尋'：

<form action="javascript:return true">
      <input type="search" placeholder="請輸入姓名">
</form>

重點：

1：放在form標籤內。

2：在form標籤內加上action=”javascript:return true”

直接喚醒數字鍵盤

直接喚醒數字九鍵的鍵盤：

<input type="text" pattern="[0-9]*" placeholder="請輸入數字1">

這時候如果如下程式碼把input標籤放到表單標籤內,則直接顯示26鍵帶有標點符號的數字鍵盤：

<form action="javascript:return true">
      <input type="number" placeholder="請輸入數字2">  <!--顯示26鍵數字鍵盤，帶有標點符號-->
</form>

以上這篇vue 專案軟鍵盤迴車觸發搜尋事件就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。