移动端6位验证码输入框实现

移动端6位验证码输入框实现

效果图:

效果图

react demo部分代码

verCode\verCode.jsx

import { useState, useRef } from 'react';
import styles from './verCode.module.less';
import classnames from 'classnames';
/**
 * 手机端6位验证码输入框
 * 用1个输入框输入,输入框设置opacity:0 
 * 使用6个li标签显示验证码,点击li标签时,输入框获取焦点
 * 
 */
const VerCodes = (props) => {
  const [verCodes, setVerCode] = useState();
  const [focus, setFocus] = useState();
  const curInputRef = useRef();

  const codeChange = (value) => {
    const codeLength = value.length;
    setVerCode(value);
    if(codeLength === 6) {
      console.log('验证码输入完成')
      // do something
    }
  };

  const codeClick = () => {
    curInputRef?.current?.focus();
  };

  const onFocus = () => {
    setFocus(true);
  };

  const onBlur = () => {
    setFocus(false);
  };

  return (
    <div className={styles.codesWrap}>
      <div className={styles.stepConTitle}>获取验证码</div>
      <div className={styles.codeInputWrap}>
        <ul className={styles.codeContainer} onClick={() => codeClick()}>
          {Array(6).fill('').map((num, index) => {
            return (
              <li 
                className={classnames(styles.fieldWrap, verCodes?.[index] ? styles.highlight : '', verCodes?.length === index && focus ? styles.focus : '')} 
                key={index}
              >
                {verCodes?.[index]}
              </li>
            );
          })
          }
        </ul>
        <AntdInputItem
          className={styles.codeInput}
          value={verCodes}
          ref={curInputRef}
          onChange={codeChange}
          onFocus={onFocus}
          onBlur={onBlur}
          type={'number'}
          maxLength={6}
        >
        </AntdInputItem>
      </div>
    </div>
  )
}
export default VerCodes;

verCode\verCode.module.less

.codesWrap {
  :global {
    .am-input-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      opacity: 0;
    }
  }
  .codeContainer {
    list-style: none;
    display: flex;
    .fieldWrap {
      width: 34px;
      height: 44px;
      font-size: 36px;
      color: #333;
      line-height: 44px;
      text-align: center;
      border-bottom: 1px solid #EFEFEF; 
      margin-right: 15px;
      position: relative;
      &.highlight {
        border-color: #222222;
      }
      &.focus::after {
        content: "";
        width: 1px;
        height: 40px;
        background: #c7152d;
        display: block;
        position: absolute;
        left: 50%;
      }
    }
  }
}