react+antd实现多位验证码输入框

刚上手react，公司给了个注册需求，需求里有一个验证码的需求，废话不多说，直接上效果图和代码。

效果图

点击第一个input输入框，输入第一位数值则会跳转下一个input框，到第四位输入框时监听删除按键，光标跳回上一个输入框。

import React, { Component } from "react";
import styles from "./index.module.scss";
import { Form,Input, Button } from "antd";
class NormalLRegisterForm extends Component {constructor(props) {super(props);this.state = {maxLength: 1, //验证码长度valueA: "", //验证码第一位valueB: "", //二valueC: "", //三valueD: "", //四};}//验证码光标后移handleInputValue = (e, type) => {const { isShow } = this.state;const { value = "" } = e.target;if (type == "A") {if (value) this.secondFoucs.input.focus();this.setState({valueA: value.slice(0, 1)});} else if (type == "B") {if (value) this.tridFoucs.input.focus();this.setState({valueB: value.slice(0, 1)});} else if (type == "C") {if (value) this.fourFoucs.input.focus();this.setState({valueC: value.slice(0, 1)});} else {this.setState({valueD: value.slice(0, 1),isShow: true});}};//删除验证码handleDel = e => {const BACK_SPACE = 8;const isBackSpaceKey = e.keyCode === BACK_SPACE;if (isBackSpaceKey && e.target.value.length === 0) {let previous = e.target;previous = previous.previousElementSibling;while (previous) {if (previous === null) break;if (previous.tagName.toLowerCase() === "input") {previous.focus();break;}}}};reder(){const { valueA, valueB, valueC, valueD, maxLength } = this.state;return(<Form onSubmit={this.handleSubmit} className={styles.registerForm}><p>请输入验证码</p><FormItem><InputclassName={styles.checkInput}ref={ref => {this.firstFoucs = ref;}}value={valueA}maxLength={maxLength}onKeyDown={maxLength ? this.handleDel : null}onChange={e => this.handleInputValue(e, "A")}/><InputclassName={styles.checkInput}ref={ref => {this.secondFoucs = ref;}}value={valueB}maxLength={maxLength}onKeyDown={maxLength ? this.handleDel : null}onChange={e => this.handleInputValue(e, "B")}/><InputfoucsclassName={styles.checkInput}ref={ref => {this.tridFoucs = ref;}}value={valueC}maxLength={maxLength}onKeyDown={maxLength ? this.handleDel : null}onChange={e => this.handleInputValue(e, "C")}/><InputclassName={styles.checkInput}ref={ref => {this.fourFoucs = ref;}}value={valueD}maxLength={maxLength}onKeyDown={maxLength ? this.handleDel : null}onChange={e => this.handleInputValue(e, "D")}/></FormItem></Form>)}}

react+antd实现多位验证码输入框相关推荐

移动端6位验证码输入框实现
移动端6位验证码输入框实现参考文章效果图: react demo部分代码 verCode\verCode.jsx import { useState, useRef } from 'react'; ...
js+css实现验证码框,前端实现6位验证码输入框效果
这个验证码输入应用场景非常的多,看起来很简单的,但是做起来还是有一些坑. 首先的想法就是6个input框,每输入一个数字之后,切换到下一个input,即切换focus,如果输入很快的话,会导致切换不过 ...
Vue实现简单实用的 6 位验证码输入框
效果图如上.GitHub地址(包括打包成浏览器组件),感谢支持!!! 在开发中,我们可能会经常遇到验证码组件,上图就是我们设计师给的 UI Remark:具体效果要看需求.样式还是要自己修改一下(可 ...
手机端实现6位验证码输入框效果
也就是界面上,6个input框当初想着应该很简单的,结果做起来发现,还是坑蛮多的首先的想法就是6个input框,每输入一个数字之后,切换到下一个input,即切换focus,昨晚发现安卓机很流畅 ...
React+Antd+TypeScript 开发规范
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官 ...
Android中的验证码输入框
验证码.激活码各种码的输入框格日常使用里屡见不鲜了,四格的,六格的最近开发遇到这么一个输入14位序号(美观而需要输入框)的需求,本着这种简单控件,不重复造轮子的想法,开始全网搜寻ing- 但就是这么 ...
vue中验证码输入框
如这样的验证码输入框,要实现一个类似于这样的输入框,而且有几个页面都需要类似的输入框(输入身份证后四位/输入支付密码),就准备撸一个小组件. 原理: 对每个input输入输入框进行函数的操作, 代码如 ...
Android 验证码输入框的实现
上篇博客讲到登录注册的流程所需用到的带显示密码的输入框,而在整个完整流程中,短信发送获取验证码并填写相信也是重要的一环.当然,关于验证码的实现很多大神的博客也写过,并且款式多样,任君选择,这里只是记录 ...
【Android】短信验证码输入框（80/100）
先看效果动图如下: 验证码输入框是常用的app功能页面,实现上并不复杂详情如下: 首先是布局xml文件如下: <?xml version="1.0" encoding=&qu ...

react+antd实现多位验证码输入框

效果图

react+antd实现多位验证码输入框相关推荐

最新文章

热门文章