uniapp 如何实现光标自动对焦

在uniapp中，如何实现页面加载时自动让输入框获取光标焦点？我在H5端使用autofocus属性可以生效，但在小程序和APP端无效。请问有没有跨平台的解决方案？需要兼容iOS和Android。

2 回复

在uni-app中，可使用focus属性实现自动对焦。在input或textarea标签中添加:focus="true"即可。例如：

<input :focus="true" placeholder="自动获取焦点" />

注意：部分平台可能需要手动触发，如H5端可能需要延时设置。


在 UniApp 中，可以通过以下方法实现输入框的光标自动对焦：

方法一：使用 focus 属性

在 input 或 textarea 组件上设置 focus 属性为 true，页面加载时自动聚焦。

<template>
  <view>
    <input focus placeholder="自动获取焦点" />
  </view>
</template>

方法二：通过 ref 和 $refs 动态控制

适用于需要条件触发（如点击按钮后）聚焦的场景。

<template>
  <view>
    <input ref="myInput" placeholder="点击按钮聚焦" />
    <button @tap="focusInput">聚焦输入框</button>
  </view>
</template>

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

注意事项：

  1. 平台差异：部分小程序平台可能对自动聚焦有限制（如微信小程序需用户交互触发）。
  2. 组件兼容：确保使用官方支持的 input 或 textarea 组件。
  3. 动态控制：若需延迟聚焦，可使用 setTimeout（例如页面动画完成后）。

示例：页面加载后延迟聚焦

onReady() {
  setTimeout(() => {
    this.$refs.myInput.focus();
  }, 500); // 延迟500毫秒
}

根据需求选择合适的方法即可实现光标自动对焦。

回到顶部