iOS Pin

by pphheerroonn

HTML

<div class="container">
<input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" />
<input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" />
<input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" />
<input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" />
</div>

CSS

.container input{width: 30px; height:30px;text-align:center;font-size:30px;}

JavaScript

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
    var target = e.srcElement;
    var maxLength = parseInt(target.attributes["maxlength"].value, 10);
    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;
            }
        }
    }
}