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

Question

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

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

Answer 1

Другой вариант, если вы рады, что эта функция доступна только для новых браузеров, - это использовать поддержку, предлагаемую атрибутом placeholder 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();

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 или 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'}" />

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

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 мы можем дать атрибут placeholder для input elements.

, например

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

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

Answer 9

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

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

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

Answer 10

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