在 MUI 中实现验证码输入效果在 MUI 中实现验证码输入效果实现思路分解使用 4 个独立输入框横向排列输入时自

在 MUI 中实现验证码输入效果

实现思路分解

使用 4 个独立输入框横向排列
输入时自动跳转下一输入框
支持退格键回删
自动填充验证码功能
验证成功显示加载动画
错误处理与页面跳转

代码实现

一、CSS 样式部分

css

/* 容器样式 */
.box {
  width: 90vw;
  margin: 5vw;
  border-radius: 2vw;
  box-shadow: 1px 1px 1vw #ddd; /* 柔和阴影 */
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* 输入框重置 */
input[type=text] {
  margin: 0;
  border: none;
  width: 12vw;  /* 保持正方形 */
  height: 12vw; /* 移动端适配 */
  text-align: center;
  font-size: 6vw;
}

/* 隐藏默认分隔线 */
.mui-table-view::before,
.mui-table-view::after {
  height: 0;
}

/* 输入框容器 */
.li {
  border: 1px solid #999;
  border-radius: 1vw;
  width: 12vw;
  height: 12vw;
}

关键属性说明：

vw单位：实现移动端自适应
flex布局：快速实现水平排列
box-shadow：创建卡片投影效果
::before/::after伪类：清除 MUI 默认样式

二、HTML 结构部分

html

<div class="box">
  <div class="title">请输入验证码</div>
  <ul class="mui-table-view ul">
    <li class="mui-table-view-cell li">
      <input type="text" maxlength="1" class="code-input">
    </li>
    <!-- 重复3个相同结构 -->
    ...
  </ul>
</div>
<button id="btn">自动输入</button>
<div class="tankuang">...</div>

关键属性说明：

maxlength="1"：限制单字符输入
mui-table-view：利用 MUI 列表组件
tankuang：验证结果弹窗容器

三、JavaScript 逻辑部分

javascript

// 输入框焦点切换逻辑
inputs.forEach((input, index) => {
  input.addEventListener('input', (e) => {
    if (input.value.length === 1 && index < 3) {
      inputs[index + 1].focus();
    }
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !input.value && index > 0) {
      inputs[index - 1].focus();
    }
  });
});

// 自动填充按钮
document.querySelector('#btn').addEventListener('tap', () => {
  const randomCode = '0000'; // 模拟验证码
  inputs.forEach((input, index) => {
    input.value = randomCode.charAt(index);
  });
});

// 验证逻辑
function getTo(code) {
  if (+code === 0000) {
    mask.show(); // MUI 遮罩层
    document.querySelector('.tankuang').style.display = 'flex';
    setTimeout(() => {
      mask.close();
      mui.openWindow('index.html'); // 页面跳转
    }, 2000);
  } else {
    mui.toast('密码错误');
  }
}

核心功能说明：

input事件：实时检测输入完成度
keydown事件：处理退格键逻辑
createMask()：创建页面遮罩层
mui.openWindow()：MUI 页面跳转方法

完整源码

html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>验证码输入</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/mui.min.css" rel="stylesheet">
  <style>
    /* 此处插入上方CSS代码 */
  </style>
</head>
<body>
  <header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">验证码输入框</h1>
  </header>
  <div class="mui-content">
    <!-- 此处插入上方HTML代码 -->
  </div>
  <script src="js/mui.min.js"></script>
  <script>
    // 此处插入上方JavaScript代码
  </script>
</body>
</html>

实现要点总结

输入框联动：通过index参数控制焦点切换
输入验证：使用maxlength限制输入长度
样式覆盖：重置 MUI 默认列表样式
动画反馈：加载动画+遮罩提升用户体验
移动适配：全面使用vw单位实现响应式
错误处理：mui.toast()显示即时反馈