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

Это называется водяным знаком текстового поля, и это делается с помощью 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

Вы можете установить placeholder с помощью атрибута 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">

Вы можете добавить и удалить специальный класс 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...'; }">

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

input.hint {
    color: grey;
}

Лучший способ - связать ваши события JavaScript с помощью какой-либо библиотеки JavaScript, например jQuery или YUI и поместите свой код во внешний .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'}" />

Обновлено: добавлена ​​запрошенная раскраска.

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

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

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

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

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

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

например.

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

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

Здесь представлен функциональный пример с кешем библиотеки Ajax Google и некоторой магией 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>

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

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

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

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

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

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

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

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

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

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

 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");
        }
    });
});

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

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

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

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

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

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

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

Вы хотите присвоить что-то подобное этому фокусу:

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

и это toblur:

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

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

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

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

Полезный тег Simple Html 'required'.

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

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

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