VUE技巧：实现移动端搜索框点击搜索后隐藏键盘功能

在移动端浏览器上实现搜索功能，通常情况下比较好的实现是点击输入框之后弹出键盘，然后enter键显示“搜索”两个字；输入关键字然后点击“搜索”，键盘收起，执行对应的查询操作。如下图所示：

那么要如何实现呢？

1. 首先要使用form表单元素包裹着input元素；
2. 将input元素注册到$refs上，设置input元素的type为“search”
3. form表单元素默认的“action”属性要保留（属性的内容为空即可，配合input的type值为“search”这样是为了让键盘识别出当前为搜索表单），然后要使用VUE提供的修饰符阻止表单默认的提交行为，在form元素上添加@submit.prevent=“XXXX”（XXXX是具体的执行方法包含关键字搜索以及使input失去焦点的操作）

<form @submit.prevent="query" action="">
  <input type="search" ref="searchKey" v-model="keyword">
</form>

query () {
  this.$refs.searchKey.blur()
  /* 以下就是具体的查询操作 */
  ......
}