JavaScript - Campo de Formulario para Horas con dos puntos automático al ir escribiendo

<button onclick="test()">Test</button>

<input type="text" id="demo">

<script>

function test() {

var str = document.getElementById("demo").value;

if(isNaN(str))return;

document.getElementById("demo").value =

str.slice(0,1) + ":" + str.substr(1,4);

}

</script>

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>