jQuery скрипт для очистки полей ввода


Я пытаюсь написать jQuery скрипт, где, когда пользователь нажимает на вход в пространство очищает и потом, если они не в нем, он появляется.

Это то, что я придумал. Есть ли лучший способ сделать это? Если это так, почему это лучше?

$(document).ready(function() {
            // set all input.text default value according to alt attribute
            $("input.contactStyle").each(function(){
                $(this).val($(this).attr("alt"));
            });

            // clear input.text on focus, if still in default
            $("input.contactStyle").focus(function() {

                if($(this).val()==$(this).attr("alt")) {
                    $(this).val("");
                }
            });

            // if field is empty afterward, add text again
            $("input.contactStyle").blur(function() {
                if($(this).val()=="") {
                    $(this).val($(this).attr("alt"));
                }
            });

            // set all input.text default value according to alt attribute
            $("textarea.contactStyle").each(function(){
                $(this).val($(this).attr("title"));
            });

            // clear input.text on focus, if still in default
            $("textarea.contactStyle").focus(function() {

                if($(this).val()==$(this).attr("title")) {
                    $(this).val("");
                }
            });

            // if field is empty afterward, add text again
            $("textarea.contactStyle").blur(function() {
                if($(this).val()=="") {
                    $(this).val($(this).attr("title"));
                }
            });
});


6617
2
задан 8 декабря 2011 в 05:12 Источник Поделиться
Комментарии
3 ответа

Похоже, вы пытаетесь воссоздать функциональность заполнитель атрибут, который существует в HTML5. Для браузеров, которые его поддерживают-и это всех современных браузерах, кроме ИЕ9 (я так думаю)--ваш выше код может быть заменен, например:

<input type="text" class="contactStyle" placeholder="Your placeholder text">

Если вы хотите использовать эту функциональность в современных браузерах понадобится JavaScript, но лучше не изобретать колесо. Несколько полифиллы были написаны другими людьми, которые позволяют использовать заполнитель атрибут независимо от браузера. Есть несколько перечислены на этой странице (сделать сочетание клавиш ctrl+f для "заполнитель").

7
ответ дан 8 декабря 2011 в 07:12 Источник Поделиться

Вы можете просто достичь своей цели с помощью этой простой плагин на jQuery клирфилде. Этот плагин очень прост и удобен в использовании

1
ответ дан 8 декабря 2011 в 07:12 Источник Поделиться

Два дополнительных замечания к @отличный ответ Джордан:

Для настраиваемых атрибутов вы должны быть с помощью данных суффиксов, как полагают спецификации HTML5: данные-АЛТ.
Вот хороший краткий читал на этом: http://ejohn.org/blog/html-5-data-attributes/

Если вы решили пройти лишнюю милю, и применять прогрессивное улучшение на неадаптированные браузеры, вот это хорошо и очень по теме отвечай так:
https://stackoverflow.com/questions/7557801/can-i-use-jquery-to-blank-textarea-fields-or-ajax-like-input-boxes/7557994#7557994

1
ответ дан 8 декабря 2011 в 01:12 Источник Поделиться