uniapp 输入框聚焦如何实现

在uniapp中如何实现输入框自动聚焦？我尝试在onLoad生命周期里调用focus()方法，但发现输入框没有自动获取焦点。请问正确的实现方式是什么？是否需要配合nextTick使用？在iOS和安卓平台上是否存在差异？

2 回复

在uniapp中，输入框聚焦可使用this.$refs.input.focus()。需在input组件添加ref="input"，然后在方法中调用即可。


在 UniApp 中，可以通过以下方法实现输入框聚焦：

1. 使用 ref 获取组件实例

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

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

2. 使用组件自带的 focus 属性

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

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

3. 页面加载时自动聚焦

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

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

4. 多个输入框切换聚焦

<template>
  <view>
    <input ref="input1" type="text" placeholder="输入框1" />
    <input ref="input2" type="text" placeholder="输入框2" />
    <button @click="focusNext(1)">聚焦输入框1</button>
    <button @click="focusNext(2)">聚焦输入框2</button>
  </view>
</template>

<script>
export default {
  methods: {
    focusNext(index) {
      if (index === 1) {
        this.$refs.input1.focus()
      } else if (index === 2) {
        this.$refs.input2.focus()
      }
    }
  }
}
</script>

注意事项：

  • 在 H5 端，部分浏览器可能需要用户交互（如点击事件）才能触发聚焦
  • 在 iOS 端，确保输入框在可视区域内，否则可能无法正常聚焦
  • 使用 onReady 生命周期确保组件已渲染完成

选择适合你场景的方法即可实现输入框聚焦功能。

回到顶部