IE9 HTML5 placeholder - как люди достигают этого?

Я пытаюсь использовать атрибут placeholder="xxx" в своем веб-приложении, и я не хочу иметь специальный визуал для IE9. Могут ли люди отказаться от некоторых хороших предложений для достижения этой функциональности в IE9?

Я нашел пару ссылок здесь, но ни один из предложенных сценариев не был достаточным... и ответы были с середины 2011 года, поэтому я подумал, что, возможно, там есть лучшее решение. Возможно, с широко распространенным плагином jQuery? Я не хочу использовать что-либо, требующее интрузивного кода, например, требуя определенного класса CSS или что-то в этом роде.

Спасибо.

EDIT. Мне также нужно, чтобы это работало для полей ввода пароля.

// the below snippet should work, but isn't.
$(document).ready(function() {
   initPlaceholders()();
}

function initPlaceholders() {
        $.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
    $.support.placeholder = true;
    return function() { }
} else {
    return function() {
        $(function() {
            var active = document.activeElement;
            $('form').delegate(':text, :password', 'focus', function() {
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && _val == _placeholder) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).delegate(':text, :password', 'blur', function() {
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
                    $(this).val(_placeholder).addClass('hasPlaceholder');
                }
            }).submit(function() {
                $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
            });
            $(':text, :password').blur();
            $(active).focus();
        });
    }
}
}

ОТВЕТЫ

Ответ 1

Мы только что исследовали одно и то же. Мы решили повторно использовать этот смысл, Aaron McCall, после внесение некоторых незначительных изменений. Главное преимущество заключается в том, что это простой, понятный код:

  • Удалите части ядра и setup_placeholders. Просто вызовите его немедленно в анонимной функции.

  • Добавить var до test.

Для браузеров, поддерживающих placeholder, он просто возвращается к этому. Он также обрабатывает новые элементы ввода (обратите внимание на использование delegate) в существующих формах. Но не обрабатывает динамические элементы новой формы. Вероятно, его можно было бы изменить с помощью jQuery.on.

Если вам это не нравится, вы можете использовать один из здесь. Однако некоторые из них сложны или имеют сомнительные дизайнерские решения, такие как setTimeout для обнаружения новых элементов.

Обратите внимание, что ему нужно использовать две пары парен, поскольку вы вызываете анонимную функцию, а затем вызываете возвращаемую функцию (это может быть учтено иначе):

(function () {
  // ...
})()();

Ответ 2

Я написал плагин jquery некоторое время назад, который добавляет поддержку заполнителя в любой браузер, который его не поддерживает, и ничего не делает в тех, которые делают.

Плагин для размещения

Ответ 3

Здесь плагин jQuery, который также работает с полями пароля. Это не так мало, как код, предложенный Мэтью, но в нем есть еще несколько исправлений. Я успешно использовал это вместе с H5Validate.

http://webcloud.se/code/jQuery-Placeholder/