How to make a input box like Number seperator in html?

Question

I would like to make this type input box. But I don't know the exact html code.

Answer 1

If you want fully working code, then you may need to use CSS and Javascript along with html. I have written a sample code which contains 10 digits of input and a button. It does the below three functionalities.

1.Each digit allows only numbers and length of a digit is 1. It means you can not enter more than one digit.

2.Once you enter a digit the cursor automatically moves to next digit.

3.On clicking on the button (Get Phone Number) you get the entered phone number as alert.

You can change the code as per your need.

Code:

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

Output:

You can see working code here : https://jsfiddle.net/sampathcse16/m4m4kty8/4/

Answer 2

You can easily implement this using border , span and 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;
}

Demo : https://jsfiddle.net/yLd8k5zk/

NOTE : Width of main-container= width of inner-container*no of inner-container

How to make a input box like Number seperator in html?

Question

2 answers

solution1
2 ACCPTED 2017-02-27 07:45:28

Code:

Output:

solution2
0 2017-02-27 06:37:42

How to make a input box like Number seperator in html?

Question

2 answers

solution1 2 ACCPTED 2017-02-27 07:45:28

Code:

Output:

solution2 0 2017-02-27 06:37:42

solution1
2 ACCPTED 2017-02-27 07:45:28

solution2
0 2017-02-27 06:37:42