input time mask using jquery

Question

I am using meioMask – a jQuery mask plugin to put time mask in a textbox. Here is the JsFiddle. It\'s working well. But I also need to put hh:mm in the textbox, to

Answer 1

You can use the HTML5 placeholder attribute to create the placeholder text, then use jQuery to add support for browsers that do not support it, and remove it once the input element gains focus.

var timeTxt = $("#txtTime").setMask('time');
var placeholder = timeTxt.attr('placeholder');

timeTxt.val(placeholder).focus(function(){
    if(this.value === placeholder){
        this.value = '';
    }
}).blur(function(){
    if(!this.value){
        this.value = placeholder;
    }
});

See: http://www.jsfiddle.net/9dgYN/2/. You should also consider using a script such as Modernizr to add feature detection for the placeholder attribute.