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

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

52 голосов
/ 25 ноября 2011

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

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

    <body>

     <script>

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

За исключением того, что я неуверен в немного JavaScript.Помощь приветствуется!

Ответы [ 9 ]

79 голосов
/ 25 ноября 2011 
function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

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

35 голосов
/ 19 ноября 2012

Или просто: 

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}
7 голосов
/ 25 февраля 2016

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

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}
6 голосов
/ 07 мая 2012

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

if(!Modernizr.input.placeholder){
  ...
}
3 голосов
/ 25 ноября 2011

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

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

2 голосов
/ 29 марта 2013

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

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

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

0 голосов
/ 15 июня 2015

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

jQuery 

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

AngularJS 

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

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

0 голосов
/ 10 апреля 2015

ПРИМЕЧАНИЕ: Заполнитель НЕ работает в Internet Explorer таким образом, он должен работать . 

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

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

0 голосов
/ 11 июля 2013

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

Этот скрипт будет проверять совместимость заполнителей в вашем браузере, и если он несовместим, он заставит все поля ввода с заполнителями использовать поле 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('');
            }
        })
    });
}
...