javascript - 以信用卡格式键入字母数字键

Question

在我当前的 React 应用程序中，我有一个 13 位字母数字键，我想在另一个屏幕上键入并粘贴为信用卡格式，即前 3 个框每个应该包含 3 个数字，第四个框应该包含 4 个数字。例如 - box1 box2 box3 box4

一旦第一个框具有所有 3 个数字，焦点应移至第一个数字的下一个框。

我为此使用反应文本掩码。

handleFocus = () =>{
    let val = document.akBox.first.value.length+1;
    if (val <= 3)
    {
      document.akBox.first.focus()
    }
    else
      {
        document.akBox.second.focus()
      }
    }

<form name='akBox'>
    <div className="col-md-1" onKeyUp={this.handleFocus}>
         <MaskedInput name= "first" mask={[/^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/]}/> 
    </div>
    <div className="col-md-1"  >
        <MaskedInput  name= "second" mask={[/^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/]}/> 
    </div>
    <div className="col-md-1">
        <MaskedInput name="third" mask={[/^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/]} /> 
    </div>
    <div className="col-md-1">
         <MaskedInput name="fourth" mask={[/^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/, /^[a-zA-Z0-9]+$/,/^[a-zA-Z0-9]+$/]} /> 
    </div>
 </form>

我能够实现解决方案，但反应文本掩码的问题是我无法将焦点移动到下一个框并通过拆分为 3-3-3-4 格式粘贴 13 位数字键。我正在学习反应，想知道我怎样才能让它也接受字母表。非常感谢帮助！

标签： javascriptreactjs