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

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

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

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

Лучший способ - связать ваши события 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'}" />

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

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

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

Вы хотите назначить для 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете установить заполнитель, используя Атрибут 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">

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

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

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

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

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

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

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

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

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

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

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

Полезен простой тег HTML "required".

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

Он указывает, что поле ввода должно быть заполнено перед отправкой формы или нажатием кнопки отправки. Вот пример

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

например

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

проверьте подробности: http://www.w3schools.com/tags/att_input_placeholder.asp

Я использую простое однострочное решение javascript, которое отлично работает. Вот пример как для текстового поля, так и для текстового поля:

    <textarea onfocus = "if (this.value == 'Text') { this.value = ''; }" onblur = "if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type = "text" value = "Text" onfocus = "if (this.value == 'Text') { this.value = ''; }" onblur = "if (this.value == '') { this.value = 'Text'; }">

единственный «недостаток» - это проверка в $ _POST или в проверке Javascript, прежде чем делать что-либо со значением поля. Это означает проверку того, что значение поля не является «Текстовым».

Вы можете использовать атрибут placeholder = "". Вот демонстрация:

<html>
<body>
// try this out!
<input placeholder = "This is my placeholder"/>
</body>
</html>