移动端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 = () => {