uniapp input获取焦点如何实现

在uniapp中，如何让input组件自动获取焦点？我试过在mounted生命周期里调用focus()方法，但没效果。是否需要特殊配置或使用其他方法？求具体实现方案。

2 回复

在uniapp中，可以使用focus属性或this.$refs.input.focus()方法让input获取焦点。例如在input标签添加focus属性，或通过ref调用focus方法。


在 UniApp 中，可以通过以下方法实现 input 组件获取焦点：

方法一：使用 ref 获取组件实例

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

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

方法二：使用 focus 属性

<template>
  <view>
    <input :focus="isFocus" type="text" placeholder="请输入内容" />
    <button @click="setFocus">点击聚焦输入框</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocus: false
    }
  },
  methods: {
    setFocus() {
      this.isFocus = true
    }
  }
}
</script>

方法三：页面加载时自动聚焦

<template>
  <view>
    <input ref="autoFocusInput" type="text" placeholder="页面加载自动聚焦" />
  </view>
</template>

<script>
export default {
  onReady() {
    // 页面准备就绪后自动聚焦
    this.$nextTick(() => {
      this.$refs.autoFocusInput.focus()
    })
  }
}
</script>

注意事项

  1. ref 方式：直接调用组件的 focus() 方法，响应更快
  2. focus 属性：通过数据绑定控制，适合需要条件判断的场景
  3. 时机问题：确保在组件渲染完成后调用 focus，可使用 onReady 或 $nextTick
  4. 兼容性：两种方法在 H5 和小程序端都支持

推荐使用 ref 方式，性能更好且代码更简洁。

回到顶部