Как я заставляю поле текста HTML показать подсказку когда пустой?

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

Вы хотите присвоить что-то вроде этого 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;
}

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

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

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

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

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

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

Лучший способ состоит в том, чтобы обеспечить электричеством Ваши события 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'}" />

Обновленный : Добавленный требуемый материал окраски.

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

Это известно как водяной знак текстового поля, и он сделан через JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript - (Совместимый с IE) .aspx

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

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

For jQuery users: naspinski's jQuery link seems broken, but try this one: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

You get a free jQuery plugin tutorial as a bonus. :)

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

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

Вы можете установить заполнитель с помощью атрибута заполнителя в HTML (поддержка браузера ). стиль шрифта и цвет могут быть изменены с помощью CSS (хотя поддержка браузером ограничена).

 input [type = search] :: - webkit-input-placeholder {/ * Safari, Chrome (, Opera?) * / Color: серый; стиль шрифта: курсив; } input [type = search]: - moz-placeholder {/ * Firefox 18- * / color: серый; стиль шрифта: курсив; } input [type = search] :: - moz-placeholder {/ * Firefox 19+ * / color: gray; стиль шрифта: курсив; } input [type = search]: - ms-input-placeholder {/ * IE (10+?) * / color: серый; стиль шрифта: курсив; } 

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

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

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