uniapp 如何给input组件设置焦点

在uniapp中，如何给input组件设置焦点？我尝试了this.$refs.input.focus()但没生效，是否需要特殊处理？求具体实现方法。

2 回复

使用 this.$refs.inputRef.focus() 方法。
需在 input 组件上设置 ref="inputRef"，
然后在方法中调用即可。


在 UniApp 中，可以通过 ref 获取 input 组件的实例，并使用 focus() 方法设置焦点。以下是具体步骤：

  1. 在模板中为 input 组件设置 ref 属性：

    <template>
  <input ref="myInput" type="text" placeholder="请输入内容" />
</template>

  2. 在脚本中通过 ref 调用 focus() 方法：

    export default {
  methods: {
    setFocus() {
      // 通过 $refs 获取组件实例并调用 focus
      this.$refs.myInput.focus();
    }
  },
  mounted() {
    // 示例：在页面加载后自动聚焦
    this.setFocus();
  }
}

注意事项：

  • 确保 input 组件已渲染完成（例如在 mounted 生命周期或事件触发后调用）。
  • 部分平台（如小程序）可能需要用户交互（如点击事件）才能触发焦点设置。

如果需要通过按钮触发焦点，可以绑定一个点击事件：

<template>
  <input ref="myInput" type="text" />
  <button @click="setFocus">点击聚焦输入框</button>
</template>

此方法适用于 UniApp 的 Vue 语法，兼容 H5 及小程序平台。

回到顶部