Simple way to check if placeholder is supported?

问题

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!

回答1:

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

回答2:

Or just:

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

回答3:

If you are using Modernizr, quick catch following:

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

回答4:

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

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

回答5:

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.

回答6:

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.

回答7:

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('');
            }
        })
    });
}

回答8:

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.

回答9:

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

Doesnt work in internet explorer 11 - return true

In theory, Internet explorer 11 is supposed to support placeholder, but in fact - when input get focus placeholder disappear. In Chrome placeholder showed until you actually type something, no matter on focus. So, feature detection doesnt work in this case - you need to detect IE and show Labels.

来源：https://stackoverflow.com/questions/8263891/simple-way-to-check-if-placeholder-is-supported

标签

javascript

html

html5

placeholder