uniapp中如何在button事件触发时将光标定位到指定input框

在uniapp中，点击button按钮触发事件时，如何将光标自动定位到指定的input输入框？尝试过用this.$refs.input.focus()但没效果，请问正确的实现方法是什么？需要兼容iOS和安卓平台。

2 回复

在button的点击事件中，使用this.$refs.inputName.focus()即可。需要先在input上设置ref="inputName"，然后在button的@click事件中调用该方法。


在uni-app中，可以通过以下方法在按钮事件触发时将光标定位到指定input框：

方法一：使用ref获取input组件并调用focus()方法

<template>
  <view>
    <input ref="myInput" type="text" placeholder="请输入内容" />
    <button @click="focusInput">点击聚焦输入框</button>
  </view>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 通过ref获取input组件实例并调用focus方法
      this.$refs.myInput.focus()
    }
  }
}
</script>

方法二：使用uni.createSelectorQuery()（适用于复杂场景）

<template>
  <view>
    <input id="myInput" type="text" placeholder="请输入内容" />
    <button @click="focusInput">点击聚焦输入框</button>
  </view>
</template>

<script>
export default {
  methods: {
    focusInput() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#myInput').fields({
        node: true,
        size: true
      }, (res) => {
        if (res && res.node) {
          res.node.focus()
        }
      }).exec()
    }
  }
}
</script>

方法三：使用nextTick确保DOM更新完成

<script>
export default {
  methods: {
    focusInput() {
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    }
  }
}
</script>

注意事项：

  1. 方法一最简单直接，推荐使用
  2. 如果input是通过v-if动态显示的，建议使用方法三
  3. 在H5端和微信小程序端都能正常工作
  4. 确保input组件已经渲染完成再调用focus方法

推荐使用方法一，代码简洁且效果稳定。

回到顶部