代码：

Question

我想制作这种类型的输入框。但我不知道确切的HTML代码。 Plase帮助我。

Answer 1

您可以使用border，span和CSS轻松实现此目的，

<div class="main-container">
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
    <span class="inner-container">
        <input class="input-style" type="text" maxlength="1" value="2">
    </span>
</div>

.main-container{
    border: 2px solid #000;
    width:180px;
}
.inner-container{
    border: 1px solid #000;
}
.input-style{
    width:20px;
    text-align:center;
    border:0px;
}

演示：https://jsfiddle.net/yLd8k5zk/

注意：主容器的宽度=内部容器的宽度*内部容器的数量

Answer 2

如果你想要完全正常工作的代码，那么你可能需要使用CSS和Javascript以及html。我编写了一个示例代码，其中包含10位输入和一个按钮。它具有以下三个功能。

1.每个数字只允许数字和数字的长度为1.这意味着您不能输入多个数字。

2.一旦输入数字，光标会自动移动到下一个数字。

3.点击按钮（获取电话号码），您将输入的电话号码设为警报。

您可以根据需要更改代码。

代码：

<!DOCTYPE html>
<html>
<style type="text/css">
table,td{
 border-collapse: collapse;
 padding:0;
 border:2px solid black;
}
td input{
width:20px;
}

</style>

<script type="text/javascript">
var currentDigit = 1;
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function moveToNextInputDigit(e){
     currentDigit = parseInt(e.id.replace("digit",""));
     currentDigit++; 
     if(e.value.length == 1 && currentDigit<=10 && document.getElementById("digit"+currentDigit).value.length!=1)
     {
      document.getElementById("digit"+currentDigit).focus();
     }
}

function getPhoneNumber()
{
 var phoneNumber = "";
 for(var i=1;i<=10;i++)
 {
    phoneNumber += document.getElementById("digit"+i).value;
 }

  alert("Phone Number: "+ phoneNumber);
}

</script>

<body>

<table>
<tr>
<td><input id="digit1" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit2" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit3" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit4" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit5" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td> 
<td><input id="digit6" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit7" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit8" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit9" type="text" maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
<td><input id="digit10" type="text"maxlength="1" onkeypress="return isNumberKey(event)" onkeyup ="moveToNextInputDigit(this)"></td>
</tr> 
</table>

<input type = "button" value="Get Phone Number" onClick="getPhoneNumber()">
</body>
</html>

输出：

您可以在此处查看工作代码：https://jsfiddle.net/sampathcse16/m4m4kty8/4/

如何在html中创建像Number seperator这样的输入框？

2 个答案:

代码：

输出：