uniapp input 获取焦点如何实现

在uniapp中，如何让input组件自动获取焦点？我试过在mounted生命周期里调用focus()方法，但没效果。请问正确的实现方式是什么？需要设置什么特殊属性吗？在iOS和安卓平台上都能正常使用吗？

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="请输入内容" 
      @blur="isFocus = false"
    />
    <button @click="isFocus = true">点击聚焦输入框</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocus: false
    }
  }
}
</script>

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

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

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

注意事项

  1. ref 方式：更灵活，可以精确控制聚焦时机
  2. focus 属性：通过数据绑定控制，适合简单的显示/隐藏场景
  3. 兼容性：两种方法在 H5、小程序、App 端都支持
  4. 时机问题：确保在组件挂载完成后再调用 focus 方法

推荐使用 ref 方式，因为它更直观且性能更好。

回到顶部