Как сделать, чтобы текстовое поле HTML показывало подсказку, когда пусто?

Question

Я хочу, чтобы в окне поиска на моей веб-странице слово «Поиск» отображалось серым курсивом. Когда поле получает фокус, оно должно выглядеть как пустое текстовое поле. Если в нем уже есть текст, он должен отображаться как обычно (черный, не курсив). Это поможет мне избежать беспорядка, удалив ярлык.

Кстати, это поиск на странице Ajax , поэтому у него нет кнопки.

Answer 1

Это называется "водяным знаком".

Я обнаружил плагин jQuery jQuery watermark , который, в отличие от первого ответа, не требует дополнительной настройки (исходный ответ также требует специального вызова перед отправкой формы) .

Answer 2

Для пользователей jQuery: ссылка jQuery от naspinski кажется разорванной, но попробуйте следующее: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

В качестве бонуса вы получаете бесплатное руководство по плагину jQuery. :)

Answer 3

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

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Тогда все, что вам нужно сделать, это обнаружить value == 0 и применить правильный класс:

 <input class="foo fooempty" value="" type="text" name="bar" />

А код jQuery JavaScript выглядит следующим образом:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Answer 4

Вы можете легко получить окошко с надписью «Поиск», а затем, когда фокус будет изменен на него, удалить текст. Примерно так:

<input onfocus="this.value=''" type="text" value="Search" />

Конечно, если вы сделаете это, собственный текст пользователя исчезнет при нажатии. Таким образом, вы, вероятно, хотите использовать что-то более надежное:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Answer 5

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Answer 6

Простой HTML-тег 'обязательный' является полезным.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Answer 7

Мне нравится решение "Знания Chikuse" - просто и понятно. Необходимо добавить вызов размытия, когда загрузка страницы будет готова, что установит начальное состояние:

$('input[value="text"]').blur();

Answer 8

Вы хотите присвоить что-то подобное onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

и это для onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(Вы можете использовать что-то более умное, например, функцию фреймворка, чтобы переключать имена классов, если хотите.)

С некоторыми CSS, как это:

input.placeholder{
    color: gray;
    font-style: italic;
}

Answer 9

Когда страница загружается впервые, в текстовом поле появится Поиск, серым цветом, если вы хотите, чтобы это было.

Когда поле ввода получает фокус, выделите весь текст в окне поиска, чтобы пользователь мог просто начать печатать, что приведет к удалению выделенного текста в процессе. Это также будет хорошо работать, если пользователь захочет использовать окно поиска во второй раз, поскольку ему не придется вручную выделять предыдущий текст, чтобы удалить его.

<input type="text" value="Search" onfocus="this.select();" />

Answer 10

Пользователь AJAXToolkit от http://asp.net