Mobile开始 Go Enter button hide Keyboard 执行并隐藏键盘弹框的逻辑 Vue

Mobile开发中，当输入框获取焦点后会自动弹出键盘，当输入完后，如果想收起（隐藏）键盘，必须需要点击其他的区域才能收起键盘。很多时候当我们输入结束，希望点击右下角的”开始“、”Go“、“Enter”、“Search”按钮，就自动提交或隐藏键盘。

下面逻辑是以Vue为例子：

1. 首先在父组件上设置keyup.enter事件的监听，父组件下面的任何一个input触发keyup.enter事件后都会调用我们自定义的方法：enterTriggered，如果是只有一个input框，就直接在input空间上见监听keyup.enter事件

<v-card @keyup.enter="enterTriggered">

　　　　<v-text-field clearable

          solo

          hide-details

          v-model="searchKey"

          ref="search"

          v-on:keyup.enter="enterTriggered"

          append-icon="search"

          @click:append="startSearch()"

          @input="startSearch()"></v-text-field>

　　　　...

</v-card>

　　2. 调用input空间的.blur()函数，就会让键盘隐藏。然后调用要submit的方法，这里是this.search();

methods: {
    enterTriggered() {
      this.$refs.search.blur();
　　　　//...其他控件失去焦点隐藏键盘
      this.search();
    }
}