First number goes inside when type last number in text-box
Add space for another number and clip the input using clip-path
#number_text {
padding-left: 9px;
letter-spacing: 31px;
border: 0;
background:
repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
bottom/100% 1px no-repeat;
width: 260px;
clip-path:polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 100%, 0 100%);
box-sizing: border-box;
outline: none;
}<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">Or without clip-path by reducing the background-size:
#number_text {
padding-left: 9px;
letter-spacing: 31px;
border: 0;
background:
repeating-linear-gradient(to right, #e1e1e1 0 26px, transparent 26px 38px)
bottom left/calc(100% - 38px) 1px no-repeat;
width: 260px;
box-sizing: border-box;
outline: none;
}<input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234">Try to add this script bellow the input-field:
<script>
var oInput = document.getElementById('number_text');
oInput.onkeypress = function(ev) {
setTimeout(function() {
if( oInput.value.length > 5 ) {
oInput.setSelectionRange(0,0);
oInput.blur();
}
}, 0);
}
</script>
This one forces your input-cursor to the beginning of the input after the 6th character was entered. I also added a blur() to the field so the cursor-jump to the beginning won't stick out.
The timeout is also needed. Without it the entered character will be inserted at the beginning. More about timeout: Is setTimeout a good solution to do async functions with javascript?
Use this code. its nicely work
var container = document.getElementsByClassName("wrap")[0];
container.onkeyup = function(e) {
var target = e.srcElement;
var maxLength = parseInt(target.attributes["maxlength"].value, 6);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() == "input") {
next.focus();
break;
}
}
}
else if (myLength <= maxLength)
{
prev=target.previousElementSibling;
while (prev = prev) {
if (prev == null)
break;
if (prev.tagName.toLowerCase() == "input") {
prev.focus();
break;
}
}
}
}.wrap input {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #000;
width: 3%;
display: inline-block;
outline: 0;
text-align: center;
}<div class="wrap">
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
</div>