Simple way to check if placeholder is supported?

Javascript Problem Overview

I want to use the HTML5 "placeholder" attribute in my code if the user's browser supports it otherwise just print the field name on top of the form. But I only want to check whether placeholder is supported and not what version/name of browser the user is using.

So Ideally i would want to do something like

    <body>
    
     <script>
              
           if (placeholderIsNotSupported) {
             <b>Username</b>;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>

Except Im not sure of the javascript bit. Help is appreciated!

Javascript Solutions

Solution 1 - Javascript

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

I used a jQuery-ized version as a starting point. (Just giving credit where it's due.)

Solution 2 - Javascript

Or just:

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}

Solution 3 - Javascript

Another way without making an input element in memory that has to be GC'd:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}

Solution 4 - Javascript

If you are using Modernizr, quick catch following:

if(!Modernizr.input.placeholder){
  ...
}

Solution 5 - Javascript

http://html5tutorial.info/html5-placeholder.php has the code to do it.

If you're already using jQuery, you don't really need to do this though. There are placeholder plugins available ( http://plugins.jquery.com/plugin-tags/placeholder ) that will use the HTML5 attribute where possible, and Javascript to simulate it if not.

Solution 6 - Javascript

I'm trying to do the same... here i wrote this

if(!('placeholder'in document.createElement("input"))){
   //... document.getElementById("element"). <-- rest of the code
}}

With this you should have an id to identify the element with the placeholder... I don't know thought if this also help you to identify the element ONLY when the placeholder isn't supported.

Solution 7 - Javascript

Hi there this is an old question but hopefully this helps someone.

This script will check the compatibility of placeholders in your browser, and if its not compatible it will make all input fields with a placeholder use the value="" field instead. Note when the form is submitted it will also change your input back to "" if nothing was entered.

// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
   $('[placeholder]').load(function(){
        var input = $(this);
        if (input.val() == '')
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    });

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}

Solution 8 - Javascript

A bit late to the party, but if you're using jQuery or AngularJS you can simplify the method suggested above without using any plugins.

jQuery

typeof $('<input>')[0].placeholder == 'string'

AngularJS

typeof angular.element('<input>')[0].placeholder == 'string'

The checks are very similar, as AngularJS runs jQlite under the hood.

Solution 9 - Javascript

NOTE: Placeholder DO NOT work in internet explorer in a way, it should work.

document.createElement("input").placeholder == undefined

Doesnt work in internet explorer 11 - document.createElement("input").placeholder return empty string

var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);

Doesnt work in internet explorer 11 - return true

'placeholder'in document.createElement("input")