HTML5 placeholder Attribut jQuery Fix

We just had to find out that the behaviour of the HTML5 Placeholder Attribute changed compared to HTML 4. If you click into the input field, the placeholdertext will not disappear. For us this change is not welcome. That’s why we wrote a jQuery Script to handle this issue:

$('[placeholder]').focus(function() {
    var placeholder = $(this).attr('placeholder');
    $(this).attr('placeholder','');
    $(this).blur(function() {
        if ($(this).val() == '' ) {
            $(this).attr('placeholder',placeholder);
        }
    })
});

In favor of keeping it understandable we kept the code uncompressed first. The compressed version follows beneath:

$("[placeholder]").focus(function(){var e=$(this).attr("placeholder");$(this).attr("placeholder","").blur(function(){if($(this).val()==""){$(this).attr("placeholder",e)}})})
About This Author

Grüezi! My name is Angela. I'm projectleader of the swissbased webagency Tree Stones, i love fantasybooks and you could say i'm in a unhealty realtionship with coffe from Starbucks.

Post A Reply

*