如何对输入字段进行分区，使其在屏幕上显示为单独的输入字段？

Question

我要设计图片中的内容，用户要输入一个四位数的一次性密码（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" />

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

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;

}


<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>

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