JavaScript

<script>
  // auto tab
  (function(){
    var maxLengthInputs = document.querySelectorAll('#myform input[maxlength]');
    for(var i=0, l = maxLengthInputs.length; i<l; i++){
        maxLengthInputs[i].addEventListener('input', autotab );
    }
    function autotab(e){
        if ( this.value.length == this.maxLength){
            var allInputs = document.querySelectorAll('#myform input');
            var index = 1 + Array.prototype.indexOf.call(allInputs, this);
            if (allInputs[index] ){
                allInputs[index].focus();
            } else {
                this.blur();
            }
        }
    }
})();
</script>

CSS

<style>
::-webkit-input-placeholder {
    color: #f66;
}
::-moz-placeholder {
    color: #f66;
}
:-ms-input-placeholder {
    color: #f66;
}
:-moz-placeholder {/* FF <= 18 (jan 2013) */
    color: #f66;
}
:focus::-webkit-input-placeholder {
    color: transparent;
}
:focus::-moz-placeholder {
    color: transparent !important;
}
:focus:-ms-input-placeholder {
    color: transparent;
}
:focus:-moz-placeholder {/* FF <= 18 (jan 2013) */
    color: transparent !important;
}
</style>

Leave a Comment