Як зробити так, щоб текстове поле HTML відображало підказку, коли вона порожня?

Я хочу, щоб у вікні пошуку на моїй веб-сторінці відображалося слово "Пошук" сірим курсивом. Коли поле отримує фокус, воно повинно виглядати як порожнє текстове поле. Якщо в ньому вже є текст, він повинен відображати текст нормально (чорний, не курсив). Це допоможе мені уникнути захаращення, видаливши етикетку.

До речі, це веб- пошук в Ajax , тому в ньому немає жодної кнопки.

Інший варіант, якщо ви раді використовувати цю функцію лише для нових браузерів, - це використовувати підтримку, запропоновану атрибутом заповнення 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();

Це відоме як водяний знак textbox, і це робиться через 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атрибута в 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...'; }">

Потім вкажіть клас підказки зі стилем, який ви хочете, наприклад, у своєму 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" />

Більше інформації та приклад можна знайти тут .

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

Зараз це стало дуже просто. У html ми можемо надати атрибут placeholder для вхідних елементів.

напр

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

перевірте докладніші відомості: http://www.w3schools.com/tags/att_input_placeholder.asp

Для користувачів jQuery: посилання jQuery naspinski здається порушеним, але спробуйте це: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Ви отримуєте безкоштовний підручник для плагінів jQuery як бонус. :)

Я знайшов плагін jQuery jQuery Watermark кращим, ніж той, що вказаний у верхній відповіді. Чому краще? Оскільки він підтримує поля введення пароля. Крім того, встановити колір водяного знака (або інших атрибутів) так само просто, як створити .watermarkпосилання у вашому CSS-файлі.

Це називається "водяний знак".

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

Використовуйте jQuery Form Notifier - це один з найпопулярніших плагінів jQuery, і він не страждає від помилок, як це роблять деякі інші пропозиції jQuery (наприклад, ви можете вільно стилювати водяний знак, не переживаючи, якщо він збережеться в база даних).

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

Ще один, запропонований іншими (на цифровому сайті digitalbrush.com), випадково подасть значення водяного знаку у вашу форму, тому настійно рекомендую проти цього.

Використовуйте фонове зображення для відображення тексту:

 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 type="text" value="Search" onfocus="this.select();" />

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

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

Ви хочете призначити щось подібне на фокус:

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, яке чудово працює. Ось приклад як для текстового поля, так і для textarea:

    <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, перш ніж робити щось зі значенням поля. Значить, перевірити, чи не є значення поля "Текст".

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

Простий тег Html 'обов'язковий' корисний.

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

Він визначає, що поле для введення повинно бути заповнене перед надсиланням форми або натиснути кнопку подати. Ось приклад

Користувач AJAXToolkit від http://asp.net