Как предустановить ввод текстовых полей с подсказкой текста, который исчезает при вводе (jQuery)

Когда вы нажимаете кнопку "Ask Question" на переполнении стека, раздел заголовка вопроса предварительно заполняется светло-серым текстом, который читает

"what your programming question? be specific"

Затем, когда вы нажимаете внутри поля Title и начинаете вводить текст, этот текст исчезает.

Я хочу сделать то же самое в своем приложении.

Есть ли трюк в jQuery для этого?

И, в частности, как вы меняете цвет текста от светло-серого для текста-заполнителя до цвета текста по умолчанию, когда кто-то начинает печатать?

Ответы

Ответ 1

Самый простой способ достичь этого - с атрибутом html (хотя html5) placeholder:

<input type="text" placeholder="Enter email address." name="email" />

Он появится как "светлый" текст, который исчезает, когда пользователь начинает что-то вводить.

Однако, если вам действительно нужно/нужно использовать jQuery (так как вышеописанное html-решение используется только в более современных/совместимых браузерах), здесь способ:

$(document).ready(
    function(){
        $('input:text').each(
            function(){
                $(this).click(
                    function(){
                        $(this).val('');
                    });
                $(this).blur(
                    function(){
                        if ($(this).val == '') {
                            $(this).val($(this).attr('placeholder'));
                        }
                    });
            });
    });

Отредактировано, чтобы добавить отсутствующий ) в окончательный if, а также добавить слегка пересмотренную версию выше, в которой есть текст с немного серым цветом placeholder (так как я полагаю, что OP например, учитывая его вопрос в комментариях ниже):

$(document).ready(
    function(){
        $('input:text').each(
            function(){
                $(this)
                    .val($(this).attr('placeholder'))
                    .css('color','#999');
                $(this).click(
                    function(){
                        $(this)
                            .val('')
                            .css('color','#000');
                    });
                $(this).blur(
                    function(){
                        if ($(this).val() === ''){
                            $(this)
                                .val($(this).attr('placeholder'))
                                .css('color','#999');
                        }
                    });
            });
    });

JS Fiddle demo.

Ответ 2

<input type="text" value="whats your programming question" id="txt"/>


$(document).ready(function(){
    $('#txt').click(function(){
          this.value = '';
          this.style.color = 'black';
    }).blur(function(){
      if ( this.value == '')
          this.value = 'whats your programming question';
           this.style.color = 'lightgray';
    });
});

Ответ 3

Решения, представленные до сих пор, имеют недостаток: запрошенный текст отправляется на сервер, если пользователь не вводит никаких значений во вход. Вы можете найти здесь лучшее решение, которое также позаботится об этой проблеме: http://kyleschaeffer.com/best-practices/input-prompt-text/

Ответ 4

Хотя я не знаю, как это сделать в jQuery, довольно просто сделать это прямо с JavaScript. Просто назначьте функцию, которая очищает текстовое поле от свойства onClick поля, например:

<input type="text" id="textID" onclick="clear" />

И вам Java script будет что-то вроде:

function clear()
{
    document.getElementById("textID").value = "";
}

Ответ 5

Ответы здесь являются отличными отправными точками, пользователь может затем проверить значение promptext на submit и игнорировать его (или не отправлять, если он все еще существует и т.д.)

У меня возникли проблемы с получением решения http://kyleschaeffer.com/best-practices/input-prompt-text/, которое заставляет текст запроса выстраиваться в очередь с полем ввода в каждом браузере тестирование