Posts Tagged Under: html5 @en

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)}})})