45、自定义input唤起键盘

自定义 input 唤起键盘。移动端页面自定义 input 唤起键盘 return，有时需要将换行键改为搜索，为了达到更好的用户体验。
在 html5 中，我们可以将 input 的 type 修改为 search，这样修改之后，我们的安卓手机会变成搜索或者搜索符号、IOS 则会变成换行。

1、安卓手机

1	`<input type="search" placeholder="请输入你要搜索的内容" v-model="value" />`

2、苹果 IOS 手机

与安卓手机不同的是，我们需要在外层包裹一个 form

1
2
3

<from action="javascript:return true">
    <input type="search" placeholder="请输入你要搜索的内容" v-model="value">
</form>

3、修改 search 的默认样式

input[type="search"] {
  -webkit-appearance: none;
}
input::-webkit-search-cancel-button {
  display: none; // 关闭按钮
}

4、禁止输入法弹出的方法

readonly 属性的使用

点击输入框触发 focus 事件弹出时间 picker，将选择的开始时间、结束时间都显示在输入框里，这里加入只读 readonly 属性可以避免输入法的弹出。

1 2	`<input v-model="startDate" readonly @focus="openStartPicker" /> <input v-model="endDate" readonly @focus="openEndPicker" />`

Jude's blog