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

hollyDysania發表於2018-12-07

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

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

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

將input的type修改為search：是HTML5 中的新型別 關於相容性可以查閱MDN

手機端毫無壓力，可以放心使用

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

親測

  • 安卓機會變為搜尋或搜尋的?的符號按鈕

  • 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;} // 關閉的按鈕
複製程式碼

相關文章