可定制react18 input otp 一次性密码输入组件

目录
  • 正文
  • 主要特点
  • 基本用法
    • 1.安装和导入
    • 2.将OtpInput组件添加到应用程序中
    • 3.所有默认的道具
  • 预览

正文

一个完全可定制的、用于React驱动的应用程序的一次性密码（OTP）、电话号码和pin码输入组件。

主要特点

  • 它在React和ionic应用程序上都很好用。在手机上也能正常工作。
  • 你可以用inputNum道具只指定数字输入。
  • 在网页和手机上与剪贴板粘贴功能完美配合。
  • npm上唯一支持'enter'键提交的OTP输入包。
  • 在Android上没有OTP粘贴问题。
  • 在iOS chrome上轻松粘贴，从短信中读取功能。
  • 支持onSubmit可选道具。你甚至不需要一个按钮来提交。
  • 你也可以用这个包来输入电话号码。
  • 你也可以用这个包在密码字段上使用inputSecure道具。
  • 你可以为React18-input-otp提供自定义css以及输入道具。

基本用法

1.安装和导入

# Yarn
$ yarn add react18-input-otp
# NPM
$ npm i react18-input-otp

import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';

// OR
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';

2.将OtpInput组件添加到应用程序中

export default class App extends Component {
  state = { otp: '' };
  handleChange = (otp) => this.setState({ otp });
  render() {
    return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
  }
}

// OR
export default function ReactOtpInput() {
  const [otp, setOtp] = useState('');
  const handleChange = (enteredOtp) => {
    setOtp(enteredOtp);
  };
  return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
}

3.所有默认的道具

numInputs: 4,
onChange: (otp) => console.log(otp),
isDisabled: false,
shouldAutoFocus: false,
value: '',
isInputSecure: false,
onSubmit: (otp) => console.log(otp),

预览

The postCustomizable One-time Password Input Component - react18-input-otpappeared first onReactScript.

以上就是可定制react18 input otp 一次性密码输入组件的详细内容，更多关于react18 input otp 一次性密码输入的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 适用于React Native 旋转木马应用程序介绍

    适用于React Native 旋转木马应用程序介绍

    目录 正文 如何使用它 1.安装并导入 react-native-intro-carousel 2.示例应用程序 预览 正文 一个带有分页功能的介绍页面旋转木马(onboarding)动画. 如何使用它 1.安装并导入 react-native-intro-carousel # Yarn $ yarn add react-native-intro-carousel # NPM $ npm i react-native-intro-carousel import * as React from '

  • React 程序设计简单的轻量级自动完成搜索框应用

    React 程序设计简单的轻量级自动完成搜索框应用

    目录 实现效果 如何使用它 1.安装并导入该组件 2.将ReactSearchBox 组件添加到应用程序中 3.定义你的自动建议列表的数据 4.所有可用的组件道具 预览 实现效果 一个为React应用程序设计的简单的轻量级自动完成搜索框. 如何使用它 1.安装并导入该组件 # Yarn $ yarn add react-search-box # NPM $ npm i react-search-box import React, { Component } from "react";

  • React Native提供自动完成的下拉菜单的方法示例

    目录 正文 如何使用它 1.安装 2.导入自动完成的下拉组件 3.基本使用方法 4.数据集应该是一个JS对象或数组 5.可用的道具 预览 正文 一个具有搜索和自动完成(typeahead)功能的React Native的下拉项目选择器. 如何使用它 1.安装 # Yarn $ yarn add react-native-autocomplete-dropdown # NPM $ npm i react-native-autocomplete-dropdown 2.导入自动完成的下拉组件 impo

  • 可定制React自动完成搜索组件Turnstone实现示例

    可定制React自动完成搜索组件Turnstone实现示例

    目录 正文 特点 如何使用它 1.安装并导入Turnstone 2.基本使用方法 3.默认的组件道具 预览 正文 一个高度可定制的.易于使用的React自动完成搜索组件. 特点 轻量级的React搜索框组件 用可定制的标题将来自多个API或其他数据源的搜索结果分组 指定列表框选项的最大数量,以及每组的加权显示比例 用你自己的React组件完全定制列表框选项.添加图片.图标.额外的子选项.按组或索引的不同视觉处理等等...... 在输入的文本下面显示typeahead自动建议文本 使用各种CSS方

  • 可定制react18 input otp 一次性密码输入组件

    可定制react18 input otp 一次性密码输入组件

    目录 正文 主要特点 基本用法 1.安装和导入 2.将OtpInput组件添加到应用程序中 3.所有默认的道具 预览 正文 一个完全可定制的.用于React驱动的应用程序的一次性密码(OTP).电话号码和pin码输入组件. 主要特点 它在React和ionic应用程序上都很好用.在手机上也能正常工作. 你可以用inputNum道具只指定数字输入. 在网页和手机上与剪贴板粘贴功能完美配合. npm上唯一支持'enter'键提交的OTP输入包. 在Android上没有OTP粘贴问题. 在iOS ch

  • javascript实现前端input密码输入强度验证

    本文实例为大家分享了js实现密码输入强度验证的具体代码,供大家参考,具体内容如下 需求: 1.需要对用户输入的密码进行验证,验证的级别分为强中弱,如果输入的密码强度少于6时,则不会验证,只有密码强度在6-20时才会进行验证. 相关的正则 //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"

  • JS实现六位字符密码输入器功能

    JS实现六位字符密码输入器功能

    老规矩~ 上DEMO,过过瘾先:六位字符密码输入器 再上源码:六位字符密码输入器 从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一. 先说原理 首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input:其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~). 其次呢,我们需要简单不惧一下,让着一组(6个)

  • jQuery Easyui 验证两次密码输入是否相等

    什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是

  • Android程序开发之防止密码输入错误 密码明文显示功能

    Android程序开发之防止密码输入错误 密码明文显示功能

    在使用App的时候,首次登录都需要用户输入密码的,有些朋友为了安全起见密码设置的比较长,导致很多次密码都输入错误,严重影响了用户体验效果.这一点移动开发者做好了准备工作,因为手机的私密性比较强,在输入密码的时候,可以显示输入,增强准确性,提升用户体验度.这当然要付出代价的,需要额外的代码编写功能.下面通过本文给大家介绍如何编写密码明文显示的功能,仅供参考. 本文源码的GitHub下载地址 要点 (1) 重写EditText, 添加提示密码显示和隐藏的图片. (2) 判断点击位置, 切换EditT

  • 微信小程序 密码输入（源码下载）

    微信小程序 密码输入（源码下载）

    设计支付密码的输入框 效果如下: 实例代码: <view class="pay"> <view class="title">支付方式</view> <view catchtap="wx_pay" class="wx_pay"> <i class="icon {{payment_mode==1?'active':''}}" type="Strin

  • 一款不错的键盘密码输入js程序

    keyword.js 复制代码 代码如下: //定义当前是否大写的状态 window.onload=     function()     {         password1=null;                 initCalc();     } var CapsLockValue=0; var check; function setVariables() { tablewidth=630;  // logo width, in pixels tableheight=20;  // 

  • Android仿支付宝密码输入效果封装

    Android仿支付宝密码输入效果封装

    模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa

  • Input文本框随着输入内容多少自动延伸的实现

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • Android实现支付宝6位密码输入界面

    我们先来照图分析一下: (1)限制输入6位,每一位都有自己的框格,每个格显示一位: (2)有回退/取消支付按钮: (3)有忘记密码链接: (4)自定义的只能输入数字的键盘输入区: (5)在6位输完后自动进行密码校验和支付交易.如上图左边是iOS支付宝支付密码输入控件,右边是我模仿实现的效果. 首先,我们需要一个页面来完成以上的静态布局,.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <Relativ

随机推荐