javascript - 如何划分输入字段以在屏幕上显示为单独的输入字段？

Question

看图:

我想要设计类似图像的东西，其中用户输入 4 位一次性密码 (OTP)。现在我已经通过 4 个单独的输入然后在 javascript 中组合值实现了这一点:

<input type="text" class="form-control" placeholder="0" maxlength="1"  />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />
<input type="text" class="form-control" placeholder="0" maxlength="1" />

我不确定这是否正确。我认为必须有一些样式选项，通过这些选项，一个输入文本框将显示为图像中的分区文本框。是否可以使用 Bootstrap ？如何将一个输入控件设置为显示为输入的分区字段？

Answer 1

您不必保留 4 个单独的字段；

首先你应该调整字符间距，然后调整底部的边框样式......

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline : none;
}

<input id="partitioned" type="text" maxlength="4" />

--编辑以修复 4 个字符丑陋的 5 个下划线--

var obj = document.getElementById('partitioned');
obj.addEventListener('keydown', stopCarret); 
obj.addEventListener('keyup', stopCarret); 

function stopCarret() {
    if (obj.value.length > 3){
        setCaretPosition(obj, 3);
    }
}

function setCaretPosition(elem, caretPos) {
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  min-width: 220px;
}

#divInner{
  left: 0;
  position: sticky;
}

#divOuter{
  width: 190px; 
  overflow: hidden;
}

<div id="divOuter">
    <div id="divInner">
        <input id="partitioned" type="text" maxlength="4" />
    </div>
</div>

我认为这可以作为一个起点... 希望这会有所帮助...