Question

All the examples I've found to emulate HTML5 placeholder for non-supporting browsers trigger on focus, which is NOT how it works in supporting browsers (and kinda sucks). It would be better (IMHO) to trigger on('keypress'), but that doesn't accommodate for paste operations, so I'd like to trigger on the combination of (either or) keypress and/or paste events.

jQuery(input).on('keypress', function()
{/*works*/}

jQuery(input).on('paste', function()
{/*works*/}

but I can't get the two working together in a single function! e.g.

jQuery(input).on('keypress, paste', function()
{/*just doesn't work WTF? */}

(FWIW), here's what I have... jsFiddle

// Add placeholder browser support as needed.
jQuery(function()
{   if(!ph_support()) alt_placeholder();
});
function alt_placeholder()
{   jQuery('input[placeholder]').each(function()
    {   //Assign to those input elements that have 'placeholder' attribute
        var input = jQuery(this);
        jQuery(input).val(input.attr('placeholder')).addClass('hasPlaceholder');
        jQuery(input).on('paste', function()
        {   input.removeClass('hasPlaceholder');
            if (input.val() == input.attr('placeholder'))
                input.val('');
        });
        jQuery(input).on('keypress', function()
        {   input.removeClass('hasPlaceholder');
            if (input.val() == input.attr('placeholder'))
                input.val('');
        });
        jQuery(input).blur(function()
        {   if (input.val() == '' || input.val() == input.attr('placeholder'))
                input.val(input.attr('placeholder')).addClass('hasPlaceholder');
        });
    });
}
function ph_support()
{   var test = document.createElement('input');
    if('placeholder' in test) return true;
    else return false;
}
Was it helpful?

Solution

Remove the comma

jQuery(input).on('keypress paste', function()
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top