Используйте JQuery для отображения заполнителя текста в поле пароля, а затем удалите его при вводе текста

Question

Я пытаюсь эмулировать эффект, который Twitter использует на своей домашней странице. Он отображает «Имя пользователя» и «Пароль» в обоих полях входа в систему, а затем, когда вы начинаете вводить текст, удаляет текст. Я пока не добился успеха, моя лучшая попытка вывести текст в поле пароля, но вывести его так, как если бы был введен пароль.

Есть ли плагин JQuery для этого? Я видел одно, где требуется два поля пароля, и отображает только одно за раз. Это не подходит.

Answer 1

Мы нашли лучший плагин jQuery: jQuery Placeholder Plugin (он же jquery.placeholder.js).Это лучшее по тем же причинам, что и рекламируемые им функции:

• Работает во всех браузерах класса A, включая IE6.
• Автоматически проверяет, поддерживает ли браузер изначальноHTML5 placeholder атрибут для input и textarea элементов.Если это так, плагин не будет ничего делать.Если @placeholder поддерживается только для элементов input, плагин оставит их в покое и будет применяться только к textarea.(Это относится к Safari 4, Opera 11.00 и, возможно, к другим браузерам.)
• Кэширует результаты двух тестов функций в jQuery.fn.placeholder.input и jQuery.fn.placeholder.textarea.Например, если @placeholder изначально поддерживается для input элементов, jQuery.fn.placeholder.input будет true.После загрузки плагина вы можете повторно использовать эти свойства в своем собственном коде.
• Обеспечивает, чтобы он никогда не вызывал дублирование идентификаторов в вашей DOM, даже в браузерах, которым требуется дополнительный элемент input для подделки @placeholderдля ввода пароля.Это означает, что вы можете безопасно делать такие вещи, как:

Answer 2

вы можете использовать плагин jquery watermark:

http://code.google.com/p/jquery-watermark/

Answer 3

    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

Answer 4

Я использую этот плагин