• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Mobile开始GoEnterbuttonhideKeyboard执行并隐藏键盘弹框的逻辑Vue

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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(); } }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
16_Go基础(process-control)发布时间:2022-07-10
下一篇:
GO语言基础map与函数发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap