微信小程序开发中怎么实现五位 数字验证码 输入框？

以下是微信小程序中实现五位数字验证码输入框的详细代码和逻辑：

实现效果

• 5个独立的输入框，每个框只能输入1位数字

• 输入后自动跳转到下一个输入框

• 删除时自动回退到上一个输入框

• 支持键盘直接输入和退格键操作

• 自动合并最终验证码

---

1. WXML模板代码

 

---

2. WXSS样式代码

.code-container {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  padding: 40rpx 0;
}

.code-input {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  text-align: center;
  font-size: 40rpx;
}

.code-input.active {
  border-color: #07C160;
  caret-color: #07C160;
}

 

---

3. JS逻辑代码

 

Page({
  data: {
    codeArr: ['', '', '', '', ''],  // 存储每个输入框的值
    currentFocus: 0,                // 当前聚焦的输入框索引
    keyboardHeight: 0               // 键盘高度（可选）
  },

  // 输入处理
  handleInput(e) {
    const index = Number(e.currentTarget.dataset.index);
    let value = e.detail.value;

    // 处理粘贴的情况
    if (value.length > 1) {
      value = value.slice(0, 5 - index).split('');
      const newCodeArr = [...this.data.codeArr];
      value.forEach((char, i) => {
        if (index + i < 5) {
          newCodeArr[index + i] = char;
        }
      });
      this.setData({
        codeArr: newCodeArr,
        currentFocus: Math.min(index + value.length, 4)
      });
      return this.checkCodeComplete();
    }

    // 正常输入
    if (value !== '') {
      this.setData({
        [`codeArr[${index}]`]: value,
        currentFocus: Math.min(index + 1, 4)
      });
    } else { // 处理删除
      this.setData({
        [`codeArr[${index}]`]: '',
        currentFocus: Math.max(index - 1, 0)
      });
    }

    this.checkCodeComplete();
  },

  // 检查是否输入完成
  checkCodeComplete() {
    if (this.data.codeArr.every(item => item !== '')) {
      const code = this.data.codeArr.join('');
      console.log('验证码输入完成：', code);
      // 这里可以触发提交验证码的逻辑
      wx.showToast({
        title: `验证码：${code}`,
        icon: 'none'
      });
    }
  },

  // 键盘高度变化监听（可选）
  onKeyboardHeightChange(e) {
    this.setData({
      keyboardHeight: e.detail.height
    });
  }
});

---

4. 核心逻辑说明

(1) 数据存储

• codeArr: 数组存储每个输入框的值

• currentFocus: 记录当前聚焦的输入框索引

(2) 输入处理逻辑

• 正常输入：输入值后自动聚焦到下一个输入框

• 删除操作：清空当前框并回退到上一个输入框

• 粘贴处理：支持一次性粘贴多个数字自动填充

(3) 自动验证

当所有输入框都有值时自动触发checkCodeComplete方法

---

5. 扩展功能建议

1. 添加自动提交

在checkCodeComplete方法中直接调用验证接口：

checkCodeComplete() {
  if (this.data.codeArr.every(item => item !== '')) {
    const code = this.data.codeArr.join('');
    // 调用验证接口
    wx.request({
      url: 'your_verify_api',
      method: 'POST',
      data: { code },
      success: (res) => {
        // 处理验证结果
      }
    });
  }
}

 

2. 添加错误状态

在数据中增加错误状态字段：

data: {
  error: false
}

// WXML中添加错误样式

  
    
  


// WXSS添加错误样式
.code-input.error {
  border-color: #E64340;
}

 

---

6. 实现要点总结

关键点	实现方式
输入框布局	使用flex布局实现水平排列
输入控制	设置maxlength="1"限制单字符输入
焦点管理	通过focus属性与currentFocus数据绑定
输入跳转逻辑	输入后修改currentFocus实现自动跳转
退格键处理	检测空值时回退焦点
粘贴优化	处理多字符粘贴自动填充
验证码完成检测	使用every方法检查数组是否全部非空

---

7. 注意事项

1. 键盘类型：设置type="number"调起数字键盘

2. 样式适配：根据设计需求调整输入框大小和间距

3. 性能优化：使用wx:key提升列表渲染性能

4. 错误处理：添加验证失败后的清空和错误提示功能

5. 自动聚焦：可能需要处理安卓机首次点击不聚焦的问题

通过上述代码和逻辑，可以实现一个流畅的短信验证码输入组件，支持各种常见操作场景。