vue 移动端进入页面自动弹出软键盘

最新推荐文章于 2024-01-04 21:46:09 发布

原创最新推荐文章于 2024-01-04 21:46:09 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍在Vue.js中实现输入框自动聚焦的两种方法：一是使用mounted生命周期钩子结合$nextTick方法，二是利用自定义指令v-autofocus。这两种方法克服了浏览器安全策略限制，确保iOS设备上也能正常触发键盘弹起。

<textarea  ref="textarea" v-autofocus  autofocus="autofocus"> </textarea>

方法一：

 mounted: function() {
    this.$nextTick(() => {
      this.$refs.textarea.focus();
    });
  //   window.addEventListener('touchend', () => {
  //       this.$refs.searchInput.focus();
  //  })
  },

方法二：

directives: {
    // 注册一个局部的自定义指令 v-autofocus
    autofocus: {// 指令的定义
      inserted: function(el) {
        el.querySelector("textarea").focus();        // 聚焦元素
      }
    }
  },

来自浏览器的安全策略没有用户行为触发的ui事件是失效的，ios必须经过用户操作才能触发键盘弹起