jquery-如何在输入2个数字后自动插入冒号

我想要一个接受 HH:MM（小时/分钟）格式的文本框。因此，当用户输入 HH 值时，它应该自动在后面插入一个冒号，并让用户输入 MM 值。

我不想为此使用任何插件。

我该怎么做呢？

thanks

HTML:

<input class="time" type="text"/><br/>
<input class="time" type="text"/><br/>
<input class="time" type="text"/>

JS:

var time = document.getElementsByClassName('time'); //Get all elements with class "time"
for (var i = 0; i < time.length; i++) { //Loop trough elements
    time[i].addEventListener('keyup', function (e) {; //Add event listener to every element
        var reg = /[0-9]/;
        if (this.value.length == 2 && reg.test(this.value)) this.value = this.value + ":"; //Add colon if string length > 2 and string is a number 
        if (this.value.length > 5) this.value = this.value.substr(0, this.value.length - 1); //Delete the last digit if string length > 5
    });
};

Fiddle http://fiddle.jshell.net/v4so8otb/1/