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>