如何实现一个类似 Apple 网站的短信验证码登录组件 All In One

1. 支持短信，复制粘贴自动填充
2. 支持自动聚焦，自动校验
3. 输入完成，支持自动发起确认请求(无需手动点击确认按钮)

优点：交互简洁，使用方便，UI 优雅，用户体验好 ✅

Apple ID

双重认证

https://appleid.apple.com/#!&page=signin

请输入验证码。
在输入字段中输入代码后，焦点会自动移动到下一个输入字段上。
输入验证码后，页面会自动更新。

<div class="sec-code-wrapper">
                    <security-code length="{codeLength}" type="tel" sr-context="请输入验证码。在输入字段中输入代码后，焦点会自动移动到下一个输入字段上。输入验证码后，页面会自动更新。" localised-digit="位" error-message="" split="true"><div class="security-code">
  <idms-error-wrapper {disable-all-errors}="hasErrorLabel" {^error-type}="errorType" popover-auto-close="false" {^idms-error-wrapper-classes}="idmsErrorWrapperClasses" {has-errors-and-focus}="hasErrorsAndFocus" {show-error}="hasErrorsAndFocus" {error-message}="errorMessage" {parent-container}="parentContainer" {(enable-showing-errors)}="enableShowingErrors" error-input-id="idms-input-error-1678460482091-0" anchor-element="#security-code-wrap-1678460482091-0">
  <div class="" id="idms-error-wrapper-1678460482090-0">
    
  <div id="security-code-wrap-1678460482091-0" class="security-code-wrap security-code-6 split" localiseddigit="位">
      <div class="security-code-container force-ltr">
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char0" class="form-control force-ltr form-textbox-input char-field" aria-label="请输入验证码。在输入字段中输入代码后，焦点会自动移动到下一个输入字段上。输入验证码后，页面会自动更新。 位 1" placeholder="" data-index="0">
          </div>
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char1" class="form-control force-ltr form-textbox-input char-field" aria-label="位 2" placeholder="" data-index="1">
          </div>
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char2" class="form-control force-ltr form-textbox-input char-field" aria-label="位 3" placeholder="" data-index="2">
          </div>
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char3" class="form-control force-ltr form-textbox-input char-field" aria-label="位 4" placeholder="" data-index="3">
          </div>
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char4" class="form-control force-ltr form-textbox-input char-field" aria-label="位 5" placeholder="" data-index="4">
          </div>
          <div class="field-wrap force-ltr form-textbox ">
              <input maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" type="tel" id="char5" class="form-control force-ltr form-textbox-input char-field" aria-label="位 6" placeholder="" data-index="5">
          </div>
      </div>
  </div>
  
  </div>
</idms-error-wrapper>
</div>
</security-code>
</div>

实现原理分析

1. 自定义组件

// React

demos

PayPal

https://www.paypal.com/authflow/challenges/sms/

(

标签：Apple,验证码,xgqfrms,组件,com,输入
From： https://www.cnblogs.com/xgqfrms/p/17204943.html