Простой способ проверить, поддерживается ли заполнитель?

Я хочу использовать атрибут HTML5 "placeholder" в своем коде, если браузер пользователя поддерживает его, иначе просто напечатайте имя поля поверх формы. Но я хочу только проверить, поддерживается ли заполнитель, а не какая версия/имя браузера, которое пользователь использует.

Так что в идеале я хотел бы сделать что-то вроде

    <body>

     <script>

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

Кроме того, я не уверен в бит javascript. Помощь приветствуется!

Ответы

Ответ 1

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

В качестве отправной точки я использовал jQuery-ized версию. (Просто давая кредит, где он должен.)

Ответ 2

Или просто:

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

Ответ 3

Если вы используете Modernizr, выполните следующие действия:

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

Ответ 4

Другой способ, не создавая входной элемент в памяти, который должен быть GC'd:

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

Ответ 5

http://html5tutorial.info/html5-placeholder.php имеет код для этого.

Если вы уже используете jQuery, вам действительно не нужно это делать. Доступны плагины-заполнители (http://plugins.jquery.com/plugin-tags/placeholder), которые будут использовать атрибут HTML5, где это возможно, и Javascript, чтобы имитировать его, если нет.

Ответ 6

Я пытаюсь сделать то же самое... здесь я написал это

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

С этим вы должны иметь идентификатор, чтобы идентифицировать элемент с помощью заполнителя... Я не знаю, думал ли это, если это также поможет вам идентифицировать элемент ТОЛЬКО, когда местозаполнитель не поддерживается.

Ответ 7

Привет, это старый вопрос, но, надеюсь, это помогает кому-то.

Этот script будет проверять совместимость заполнителей в вашем браузере, а если он несовместим, он будет делать все поля ввода с помощью заполнителя вместо поля value = ". Обратите внимание, что при отправке формы он также изменит ваш вход на" ", если ничего не было введено.

// 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

Немного поздно для вечеринки, но если вы используете jQuery или AngularJS, вы можете упростить предложенный выше метод без использования каких-либо плагинов.

JQuery

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

AngularJS

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

Проверки очень похожи, так как AngularJS запускает jQlite под капотом.

Ответ 9

ПРИМЕЧАНИЕ. Заполнитель НЕ РАБОТАЕТ В ИНТЕРНЕТ-браузере, он должен работать.

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

Не работает в Internet Explorer 11 - document.createElement( "input" ). placeholder возвращает пустую строку

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

Не работает в Internet Explorer 11 - возвращает true

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

Не работает в Internet Explorer 11 - возвращает true

Теоретически, интернет-исследователь 11 должен поддерживать местозаполнитель, но на самом деле - когда вводят фокус-заполнитель, исчезают. В Chrome placeholder показывается, пока вы на самом деле не набираете что-то, независимо от фокуса. Таким образом, обнаружение функций не работает в этом случае - вам нужно обнаружить IE и показать ярлыки.