移動端頁面自定義input喚起鍵盤return，換行鍵爲搜索

最近產品有個需求：移動端頁面自定義input喚起鍵盤return，換行鍵爲搜索。個人第一反應我要阻止原生的鍵盤彈起而且用js寫一個虛擬鍵盤還要能夠輸入中文！！！想一想就以爲可怕。

還好接下來查到一個簡單的方案

將input的type修改成search：是HTML5 中的新類型 關於兼容性能夠查閱MDN

手機端毫無壓力，能夠放心使用

親測

• 安卓機會變爲搜索或搜索的🔍的符號按鈕

• IOS變爲換行

如今算是把安卓機的問題搞定了

接下來是ios

須要在外層包裹form

<form action="javascript:return true">
    <input type="search" :placeholder="請輸入" autofocus @keyup.13="enterClick" v-model="value"/> </form>
複製代碼

爲何包裹form呢？

猜想IOS只識別form中的input type search

action爲須要提交到的地址，return true 應該是執行的意思（具體不太清除 可能只有這樣ios才能認出input是搜索類型）

親測

• 安卓機會變爲搜索或搜索的🔍的符號按鈕
• IOS變爲藍色搜索按鈕

最後修改search的默認樣式

input[type="search"]{
    -webkit-appearance:none;
    // 也能夠去除加上border: 0;之類的 根據設計圖來
}
input::-webkit-search-cancel-button {display: none;} // 關閉的按鈕
複製代碼