Jquery- How To Automatically Insert Colon After Entering 2 Numeric Digits

I want a to have a text box which accepts HH:MM(hours/minutes) format. So, when the user enters the value for HH, it should automatically insert a colon after that and let the user

Solution 1:

HTML:

<inputclass="time"type="text"/><br/>
<inputclass="time"type="text"/><br/>
<inputclass="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 elementvar 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

Solution 2:

If you have multiple inputs

<inputclass="test-input" placeholder="hh:mm" value=""/>
<inputclass="test-input" placeholder="hh:mm" value=""/>
<inputclass="test-input" placeholder="hh:mm" value=""/>
<inputclass="test-input" placeholder="hh:mm" value=""/>
<inputclass="test-input" placeholder="hh:mm" value=""/>

Jquery Version:

$(document).on('ready',function(){
      $('.test-input').on('keyup',keyUpHandler);
});


    functionkeyUpHandler(e){  
        var element = this;
        var key = e.keyCode || e.which;   
        insertTimingColor(element,key)
    }

    functioninsertTimingColor(element,key){
        var inputValue = element.value;
        if(element.value.trim().length == 2 && key !== 8){
            element.value = element.value + ':';
        }
    }

fiddle - jquery

Vanilla JS version

document.body.addEventListener('keyup',keyUpHandler,false);

functionkeyUpHandler(e){  
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var key = e.keyCode || e.which;   

    //check if it is our required input with class test inputif(target.className.indexOf('test-input') > -1){
        insertTimingColor(target,key)
    }

}

functioninsertTimingColor(element,key){
    var inputValue = element.value;
    if(element.value.trim().length == 2 && key !== 8){
        element.value = element.value + ':';
    }
}

fiddle - js

Solution 3:

$('id or class or parent id').on('keypress','class or id', function (e){
    var key = e.keyCode || e.which;
            if(this.value.trim().length == 2 && key !==8  && this.value.search
    (':') != -1)
        this.value = this.value + ':';
});

    $('id or class or parent id').on('keyup click','class or id', function (e){

    if(this.value.length >= 3)
        this.selectionStart = this.selectionEnd = this.value.length;

});
$('id or class or parent id').on('paste','class or id', function (e){
    e.preventDefault();

});

Solution 4:

Try it.

jQuery("#textboxId").keypress(function(){
       if(jQuery("#textboxId").val().length)==2{
          var value=jQuery("#textboxId").val();
          jQuery("#textboxId").val(value+":");
       }
    });

Solution 5:

Try the following code:

HTML:

<inputtype="text"id = "timeInput" maxlength = 14>

Javascript:

$("#timeInput").focusin(function (evt) {
    $(this).keypress(function () {
        content=$(this).val();
        content1 = content.replace(/\:/g, '');
        length=content1.length;
        if(((length % 2) == 0) && length < 10 && length > 1){
            $('#timeInput').val($('#timeInput').val() + ':');
        }
    });
});

DEMO