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

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

您不必保留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>

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