Question

I have this JavaScript which is used for creating shadow into input field:

<!-- input field shadow  -->
    var placeholder = "#{GlassfishController.date}"
    $("input").on({
        focus: function() {
            if (this.value == placeholder) {
                $(this).val("").removeClass("shadow");
            }
        },
        blur: function() {
            if (this.value == "") {
                $(this).val(placeholder).addClass("shadow");
            }
        }
    }).trigger("blur");       

Now the script displays the time format. But when I click with the mouse in the field the text disappears. I want to modify the script to disappear only when I type key. How I can do this?

Best Wishes

Answer 1

Use keypress event:

var placeholder = "#{GlassfishController.date}"
$("input").on({
    keypress: function() {
        if (this.value == placeholder) {
            $(this).val("").removeClass("shadow");
        }
    },
    blur: function() {
        if (this.value == "") {
            $(this).val(placeholder).addClass("shadow");
        }
    }
}).trigger("blur");

DEMO: http://jsfiddle.net/2qY52/