反应-代码输入
用于输入和验证 PIN 代码的响应组件 .
现场实例 这里
安装
npm i --save react-code-input
使用量
数字输入 :
...
<ReactCodeInput type='number' fields={6} />
...
文本输入 :
...
<ReactCodeInput type='text' fields={6} />
...
密码输入 :
...
<ReactCodeInput type='password' fields={6} />
...
带有选项的数字输入 :
import { reactCodeInput } from 'CodeInputField.scss'
...
const props = {
className: reactCodeInput,
inputStyle: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'lightskyblue',
border: '1px solid lightskyblue'
},
inputStyleInvalid: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'red',
border: '1px solid red'
}
}
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
使用下一个.js
import dynamic from 'next/dynamic';
const ReactCodeInput = dynamic(import('react-code-input'));
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
道具 :
| 财产 | 类型 | 说明 |
|---|---|---|
| 类型 | 字符串 | 仅包括以下类型: text, (中文(简体) ), number, (中文(简体) ), password 财务报告和审定财务报表 tel 现予接受. |
| 字段 | 编号 | 允许输入字符的数量 . |
| 价值 | 字符串 | 设置代码输入字段的值 . |
| 占位符 | 字符串 | 设置代码输入字段的占位符 . |
| 名称 | 字符串 | 设置组件名称 . |
| 变化 | 乐趣c | 函数,当输入框中值有变化时,该函数就称为函数. |
| 触摸 | 乐趣c | 标记给定的字段为“ 触碰” 以显示出错 . |
| 贱民 | 乐趣c | 为给定的田地清除"触地"旗. |
| 类Name | 字符串 | 在根元素中添加类名 . |
| 样式 | 对象 | 设置容器元素的样式. |
| 输入样式 | 对象 | 设置每个输入字段的样式. |
| 输入样式验证 | 对象 | 设置每个输入字段的样式,如果 isValid 道具为 false。 。 。 . |
| 是瓦利德语 | 嘘 | 如果输入元素包含有效数据,则返回真实性. |
| 已禁用 | 嘘 | 当存在时,它规定该元素应当被禁用. |
| 自动聚焦 | 嘘 | 设置自动聚焦于第一个输入, true 默认. |
| 过滤密钥编码 | 数组 | 向下过滤密钥上的字符 . |
| 过滤器 | 数组 | 过滤字符; 默认为 ['-','.] |
| 过滤器Chars Is 白名单 | 嘘 | filterChars 如果 false白名单,如果 true· ; false 默认. |
| 模式 | 字符串 | 图案道克指定一个正则表达式,即: 元素的值被选中. |
| 输入模式 | 字符串 | 输入Mode prof在带有动态键盘的设备上告诉浏览器要显示的键盘. |
| 自动完成 | 字符串 | 自动补全道具指定一个输入字段是否应该启用自动补全 . |
兼容
许可证
麻省理工学院