uniapp 如何实现验证码自动聚焦

在uniapp开发中，如何实现验证码输入框的自动聚焦功能？我尝试了auto-focus属性，但在部分安卓机型上不生效。请问有没有兼容性更好的解决方案？需要支持短信验证码自动填充场景。

2 回复

在uniapp中，使用focus方法实现验证码自动聚焦。在输入框组件上设置ref，页面加载时调用this.$refs.input.focus()即可。


在 UniApp 中实现验证码输入框自动聚焦，可以通过以下步骤实现：

  1. 使用 v-if 控制输入框显示：通过条件渲染确保输入框在 DOM 中正确初始化。
  2. 设置 focus 方法：在输入框显示后调用聚焦方法。
  3. 利用 nextTick 确保 DOM 更新：避免异步渲染导致的聚焦失败。

示例代码（Vue 语法）：

<template>
  <view>
    <!-- 验证码输入框 -->
    <input 
      v-if="showInput" 
      ref="codeInput" 
      type="number" 
      maxlength="6" 
      focus 
      @input="onInput"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showInput: false
    };
  },
  mounted() {
    // 组件加载后显示输入框并触发聚焦
    this.showInput = true;
    this.$nextTick(() => {
      this.$refs.codeInput.focus();
    });
  },
  methods: {
    onInput(e) {
      console.log("输入内容:", e.detail.value);
      // 可在此处理验证码逻辑
    }
  }
};
</script>

关键点说明：

  • v-if="showInput"：确保输入框动态插入 DOM，避免初始渲染问题。
  • this.$nextTick：等待 DOM 更新后执行聚焦，提高成功率。
  • focus 属性：在 input 标签中添加 focus 可辅助自动聚焦（部分平台支持）。

注意事项：

  • 平台差异：H5 和部分安卓设备可能对自动聚焦有限制，需测试兼容性。
  • 用户体验：可结合界面提示（如倒计时）引导用户操作。

此方法适用于多数场景，代码简洁且有效。如有特殊需求（如多个输入框切换），可扩展使用 ref 数组管理焦点。

回到顶部