四位/六位手机短信验证码输入框（H5实现）

输入六位（或四位）手机短信验证码是手机端常见的场景，本文记录下H5实现方法：通过隐藏input输入框，再结合六个div输入框展示输入验证码实现。

实现要点

通过定位和透明度将输入框隐藏；监听input输入行为并高亮显示当前输入验证码位置的盒子。

HTML部分

创建容器，容器添加四个显示验证码的格子，以及实际用户输入用到的input输入框。

<div class="code-area">
  <div class="code-item"></div>
  <div class="code-item"></div>
  <div class="code-item"></div>
  <div class="code-item"></div>
  <input maxlength=4 class="code-input" />
</div>

CSS部分

设置四个显示验证码的格子添加边框；将实际input输入框设置为绝对定位，透明度设置为0，覆盖在验证码格子上方。

.code-area {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 500px;
}

.code-item {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border: 1px solid #999;
  border-radius: 5px 5px;
  color: #000;
}

.code-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.active {
  border: 3px solid #1E80FF !important;
 }

JavaScript部分

监听input框的行为，包括输入、变化、聚焦、失焦。

在输入状态，获取输入框验证码数字，将其展示在验证码格子上，同时动态设置验证码格子激活状态类。

// 获取输入框和展示验证码的四个框
const codeInput = document.querySelector('.code-input');

const codeItems = document.querySelectorAll('.code-item');

const displayCode = () => {
  const curVal = codeInput.value;
  console.log('curVal',curVal)
  Array.from(codeItems).map((item,index) => {
    console.log('codeItems',curVal[index])
    curVal[index] ? item.innerText = curVal[index] : item.innerText = ''
  })
  // console.log(codeItems,typeof codeItems)
}

const resolveActive = (type) => {
  const len = codeInput.value.length;
  Array.from(codeItems).map(item => {
    item.className = 'code-item'
  });
  if (type === 'focus' || type === 'change') {
    codeItems[len === 4 ? (len - 1) : len].className = 'code-item active'
  }
}

codeInput.addEventListener('input', () => {
  displayCode();
  resolveActive('focus');
});

codeInput.addEventListener('focus', () => {
  resolveActive('focus');
})

codeInput.addEventListener('blur', () => {
  resolveActive();
});

codeInput.addEventListener('change', () => {
  displayCode();
  resolveActive('change');
})

codeInput.focus();

最终演示效果

参考链接

手机端实现6位短信验证码input输入框效果（样式及代码方法）

如何实现一个4位验证码输入框效果