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

Question

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

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

Answer 1

Другой вариант, если вы хотите, чтобы эта функция была доступна только для новых браузеров, — использовать поддержку, предлагаемую HTML 5. заполнитель атрибут:

<input name="email" placeholder="Email Address">

При отсутствии каких-либо стилей в Chrome это выглядит так:

Вы можете попробовать демо-версии здесь И в Стилизация заполнителей HTML5 с помощью CSS.

Обязательно проверьте совместимость этой функции с браузером.Поддержка в Firefox была добавлена ​​в версии 3.7.Хром в порядке.Internet Explorer добавил поддержку только в версии 10.Если вы ориентируетесь на браузер, который не поддерживает заполнители ввода, вы можете использовать плагин jQuery под названием Заполнитель HTML5 jQuery, а затем просто добавьте следующий код JavaScript, чтобы включить его.

$('input[placeholder], textarea[placeholder]').placeholder();

Answer 2

Это называется водяным знаком текстового поля и делается с помощью JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

или если вы используете jQuery, гораздо лучший подход:

• http://digitalbush.com/projects/watermark-input-plugin/
• или code.google.com/p/jquery-watermark

Answer 3

Вы можете установить заполнитель используя placeholder атрибут в HTML (поддержка браузера).А font-style и color возможно изменено с помощью CSS (хотя поддержка браузеров ограничена).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Answer 4

Вы можете добавить и удалить специальный класс CSS и изменить входное значение. onfocus/onblur с JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Затем укажите намекать класс со стилем, который вы хотите использовать в своем CSS, например:

input.hint {
    color: grey;
}

Answer 5

Лучший способ — связать ваши события JavaScript с помощью какой-нибудь библиотеки JavaScript, например jQuery или ЮИ и поместите свой код во внешний .js-файл.

Но если вам нужно быстрое и простое решение, это встроенное HTML-решение:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Обновлено:Добавил запрошенную раскраску.

Answer 6

Я отправил решение для этого на моем сайте некоторое время назад.Чтобы использовать его, импортируйте один .js файл:

<script type="text/javascript" src="/hint-textbox.js"></script>

Затем аннотируйте любые входные данные, которые вы хотите иметь подсказками, с помощью класса CSS. hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Дополнительная информация и пример доступны здесь.

Answer 7

Вот функциональный пример с кешем библиотеки Google Ajax и некоторой магией jQuery.

Это будет CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Это будет код JavaScript:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

И это будет HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Надеюсь, этого достаточно, чтобы вы заинтересовались как GAJAXLibs, так и jQuery.

Answer 8

Теперь это стало очень легко.В html мы можем указать заполнитель атрибут для вход элементы.

например

<input type="text" name="fst_name" placeholder="First Name"/>

проверьте более подробную информацию:http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

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

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

Answer 10

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

Answer 11

Это называется «водяной знак».

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

Answer 12

Использовать Уведомитель формы jQuery - это один из самых популярных плагинов jQuery, и он не страдает от ошибок, которые есть в некоторых других предложениях jQuery (например, вы можете свободно стилизовать водяной знак, не беспокоясь о том, будет ли он сохранен в базе данных).

jQuery Watermark использует один стиль CSS непосредственно в элементах формы (я заметил, что свойства размера шрифта CSS, примененные к водяному знаку, также влияют на текстовые поля — не то, что я хотел).Плюсом водяного знака jQuery является то, что вы можете перетаскивать текст в поля (jQuery Form Notifier этого не позволяет).

Другой вариант, предложенный некоторыми другими (тот, что на digitalbrush.com), случайно отправит значение водяного знака в вашу форму, поэтому я настоятельно не рекомендую его использовать.

Answer 13

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

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

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

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

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

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

Answer 14

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

<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 15

При первой загрузке страницы в текстовом поле появится «Поиск», окрашенный в серый цвет, если вы хотите.

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

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

Answer 16

Мне нравится решение «Знаний Чикусе» — простое и понятное.Нужно только добавить вызов размытия, когда загрузка страницы будет готова, что установит начальное состояние:

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

Answer 17

Вы хотите назначить onfocus что-то вроде этого:

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

и это для размытия:

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

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

С некоторым CSS вроде этого:

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

Answer 18

$('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 19

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

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

Answer 20

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