Hora: <input type="text" class="hora" size="5" autofocus />
<script>
document.querySelector('.hora').addEventListener('keypress',validateHour);
document.querySelector('.hora').addEventListener('blur',formatHour);
function validateHour(e){
e.preventDefault();
if ( !isNaN(e.key) || e.key==':' ) {
var position = this.selectionStart;
var text = this.value;
var textStart = text.substr(0,position);
var textEnd = text.substr(this.selectionEnd);
if ( (textStart+textEnd).search(':')!=-1 && e.key==':' ) return;
var textNew = textStart + e.key + textEnd;
textNew = textNew.replace(':','');
if ( textNew.length>2 ){
textStart = textNew.substr(0,textNew.length-2);
textEnd = textNew.substr(-2);
textNew = textStart + ':' + textEnd;
position++;
} else if ( textNew>59 ) {
textStart = textNew.substr(0,1);
textEnd = textNew.substr(1);
textNew = textStart + ':' + textEnd;
position++;
}
var textPart=textNew.split(':');
if ( textPart.length == 2 && textPart[0]>23 || textPart[1]>59 ) return;
this.value = textNew;
this.selectionStart = position+1;
this.selectionEnd = position+1;
}
}
function formatHour(){
var text = this.value;
if ( text!="" ) {
textPart = text.split(':');
if ( textPart.length == 2 ) {
textPart[0]=textPart[0].padStart(2,'0');
textPart[1]=textPart[1].padStart(2,'0');
} else {
textPart.push(textPart[0].padStart(2,'0'));
textPart[0]='00';
}
this.value=textPart.join(':');
}
}
</script>