React实现车牌号输入

在实际工作过程中需要这样的需求，下面我将把实现的过程记录下来
简述一下我的方法：按照车牌号的位数，渲染出相同个数的input输入框，每个输入框接收特定的值，通过ref（DOM）对每个输入框进行操作。

程序截图

首先是将静态界面搭建起来

第一步是渲染键盘主体内容

车牌号是由省份缩写汉字和大写字母以及数字组成，所以键盘应该有两种类别；

// 最终显示的键盘
board: [],
// 字母数字键盘
mix_board: [["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],["A", "S", "D", "F", "G", "H", "J", "K", "L"],["返回", "Z", "X", "C", "V", "B", "N", "M", "删除"],
],
// 省份缩写键盘
provice_board: [["京", "沪", "粤", "津", "冀", "晋", "蒙", "辽", "吉", "黑"],["苏", "浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "桂"],["琼", "渝", "川", "贵", "云", "藏", "陕", "甘", "青", "宁"],["ABC", "新", "使", "领", "警", "学", "港", "澳", "删除"],],

定义两个状态来表示不同种类的键盘，以便进行键盘类别的切换

  /*** @param type 键盘类型* 确定需要展现的键盘*/selectBoard = (type) => {if (type === "provice") this.setState({ board: this.state.provice_board });if (type === "mix") this.setState({ board: this.state.mix_board });};componentWillMount() {// 默认省份缩写键盘this.selectBoard("provice");}
// 创建键盘布局createBoard = () => {let funName = ["清空", "退格", "ABC", "删除", "返回"];return (<div className="boardMain">{this.state.board.map((item, index) => {return (<div className="keyboard_content" key={index}>{item.map((item_key, index_key) => {return (<Col key={"col_" + item_key + index_key}>{<Buttontype="primary"size="large"className={funName.includes(item_key) ? "mix mix_fun" : "mix"}value={item_key}onClick={() => {//键盘按钮点击事件}}>{item_key}</Button>}</Col>);})}</div>);})}</div>);};

将有特殊功能，特定样式的按钮，首先做上标记，在渲染的过程中赋予它们特定的CSS样式

第二步是渲染输入框

 //  创建输入框布局createInput = () => {return (<div className="inputMain"><div className="region"><inputclassName="word number_item"ref={this.number_region_word}onFocus={() => {this.setState({ currentInput: this.number_region_word.current });}}onChange={(val) => {console.log(val);}}/><inputclassName="letter number_item"ref={this.number_region_letter}onFocus={() => {this.setState({currentInput: this.number_region_letter.current,});}}/></div><div className="circle"></div><div className="number"><inputclassName="number_item"ref={this.number_item_1}onFocus={() => {this.setState({currentInput: this.number_item_1.current,});}}/><inputclassName="number_item"ref={this.number_item_2}onFocus={() => {this.setState({currentInput: this.number_item_2.current,});}}/><inputclassName="number_item"ref={this.number_item_3}onFocus={() => {this.setState({currentInput: this.number_item_3.current,});}}/><inputclassName="number_item"ref={this.number_item_4}onFocus={() => {this.setState({currentInput: this.number_item_4.current,});}}/><inputclassName="number_item"ref={this.number_item_5}onFocus={() => {this.setState({currentInput: this.number_item_5.current,});}}/></div><divclassName="elecCar"style={{ display: this.state.existNew ? "" : "none" }}><inputclassName="number_item"ref={this.number_item_6}onFocus={() => {this.setState({currentInput: this.number_item_6.current,});}}/></div></div>);};

并获取它们所有的ref

 componentDidMount() {// 首次加载完成之后焦点默认在第一个输入框内this.number_region_word.current.focus();this.state.carNumberArray = [this.number_region_word.current,this.number_region_letter.current,this.number_item_1.current,this.number_item_2.current,this.number_item_3.current,this.number_item_4.current,this.number_item_5.current,this.number_item_6.current,];}

主要方法

①键盘按钮点击事件

 // 键盘按键点击事件clickKey = (boardKey) => {if (boardKey === "返回") {this.selectBoard("provice");} else if (boardKey === "ABC") {this.selectBoard("mix");} else if (boardKey === "删除") {if (this.number_region_letter.current.value === "")this.selectBoard("provice");this.state.currentInput.value = "";if (this.number_region_word.current.value)this.setState({ currentInput: this.number_region_word.current });if (this.number_region_letter.current.value)this.focusLastInput(this.number_region_letter.current);if (this.number_item_1.current.value)this.focusLastInput(this.number_item_1.current);if (this.number_item_2.current.value)this.focusLastInput(this.number_item_2.current);if (this.number_item_3.current.value)this.focusLastInput(this.number_item_3.current);if (this.number_item_4.current.value)this.focusLastInput(this.number_item_4.current);if (this.number_item_5.current.value)this.focusLastInput(this.number_item_5.current);if (this.number_item_6.current.value)this.focusLastInput(this.number_item_6.current);} else {this.state.currentInput.value = boardKey;if (this.number_region_word.current.value)this.focusNextInput(this.number_region_word.current);if (this.number_region_letter.current.value)this.focusNextInput(this.number_region_letter.current);if (this.number_item_1.current.value)this.focusNextInput(this.number_item_1.current);if (this.number_item_2.current.value)this.focusNextInput(this.number_item_2.current);if (this.number_item_3.current.value)this.focusNextInput(this.number_item_3.current);if (this.number_item_4.current.value)this.focusNextInput(this.number_item_4.current);if (this.number_item_5.current.value)this.focusNextInput(this.number_item_5.current);if (this.number_region_word.current.value) this.selectBoard("mix");}};

输入一位焦点自动跳转到下一输入框

 focusNextInput(thisinput) {var inputs = this.state.carNumberArray;for (var i = 0; i < inputs.length; i++) {if (i === inputs.length - 1) {inputs[0].focus();break;} else if (thisinput === inputs[i]) {inputs[i + 1].focus();break;}}}

删除一个焦点自动跳转到上一位

  focusLastInput(thisinput) {var inputs = this.state.carNumberArray;for (let i = inputs.length - 1; i >= 0; i--) {if (thisinput === inputs[i]) {inputs[i].focus();break;}}}

希望有更好的方法相互交流

React实现车牌号输入相关推荐

微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
实现模拟手机全键盘车牌号输入 jq+css
其实这篇博客并没有什么技术含量,只是比较模拟键盘书写css代码比较繁琐.如果你也有类似的需求,可以将代码复制下来改改. 首先,输入效果: 删除效果: 我喜欢用rem来做适配,所以样式大小全是用的rem ...
vue +vant 车牌号输入
最近写了一个预进出场的需求 1.HTML <template><div class="keyboard"><div class="numbe ...
微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
【Android自定义View】车牌号输入法
VehicleEditText Android用于车牌号输入的自定义键盘.仿"支付宝-车主服务-添加车辆-车牌号"输入框展示的车牌号输入键盘.以下是本作与支付宝的对比图: 一.效果 ...
uniapp 小程序车牌号输入键盘
之前写微信小程序时封装了车牌号输入键盘,记录在微信小程序组件中了,最近开发uniapp又重新开发了车牌号输入键盘组件,是在微信小程序开发的键盘组件的思想上做了一版优化,增加了挂车车牌号输入,及新能源车 ...
uniapp车牌号组件
前言 uniapp写的小程序需要车牌输入功能,不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能.百度找了一下资料,发现车牌输出键盘组件都是自定义组件,也就是说得自己写.找了一 ...
python正则表达式完成车牌号检验
正则表达式:对于车牌而言,选用的正则表达式是"^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼A-Z]{1}[A-Z]{1}\s{1}[A-Z0-9]{4}[A-Z0-9挂 ...