Установите значение по умолчанию для поля поиска - пожалуйста, помогите!

Question

Я пытаюсь установить значение по умолчанию для поля поиска. Идея заключается в том, что поле поиска будет иметь значение «Поиск», пока пользователь не нажмет на него, тогда оно должно быть пустым. Кроме того, пока оно «пустое» (со значением «Поиск»), оно должно иметь класс «.blank».

Я пробовал это

<input autocomplete="off" class="" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="" />

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

Я думаю, это как-то связано с onBlur. Есть идеи?

Спасибо!

Answer 1

Это известно как водяной знак. см. http://digitalbush.com/projects/watermark-input-plugin/ для примера

Answer 2

Другая идея заключается в размещении заполнителей в ваших типах ввода: (Обратите внимание, что это HTML5.)

<input type=text placeholder="Default text here"/>

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

Answer 3

Звучит так, как будто вам просто нужно установить начальное значение на Search, прямо во входном теге, например так:

<input autocomplete="off" class="blank" id="searchq" name="searchq" onblur="if (this.value == '') { this.value='Search'; jQuery(this).addClass('blank'); };" onfocus="if (this.value == 'Search') { this.value=''; jQuery(this).removeClass('blank'); };" type="text" value="Search" />

Обратите внимание, что мы также устанавливаем начальный класс на blank.

Answer 4

Просто задайте ему значение по умолчанию «Поиск», как в

<input ... type="text" value="Search" />

Answer 5

Я обнаружил проблему, моя ошибка: вызывается onBlur, когда пользователь щелкает где-то еще. onLoad разрешен только для тегов BODY и FRAMESET. Решение состоит в том, чтобы установить значение по умолчанию где-нибудь на стороне сервера (для меня в application_controller, если поисковый запрос не представлен).

В любом случае, спасибо!

Answer 6

Вот фрагмент, который я использую для этого. Там могут быть более простые способы, но это работает. Любой предмет с классом .cleardefault будет очищен при первом наведении мыши. Любой элемент с классом .setcleardefault удалит значение по умолчанию и, если пользователь ничего не поместил в поле, при наведении мыши сбросит его до значения по умолчанию.

function ClearDefault(item) {
    // clear the default value of a form element
    if (item.defaultValue == undefined)
        item.defaultValue = item.value;
    if (item.defaultValue == item.value)
        item.value = '';
} // ClearDefault

function SetDefault(item) {
    // if item is empty, restore the default value
    if (item.value == '')
        item.value = item.defaultValue;
} // SetDefault

$(document).ready(function() {
    $(".cleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
    $(".setcleardefault")
        .mouseover(function(){
            ClearDefault(this);
        })
        .mouseout(function(){
            SetDefault(this);
        });
    /*
    */
});

Answer 7

размытие - это когда поле теряет фокус, оно не может потерять фокус до тех пор, пока не получит фокус, поэтому вам нужно щелкнуть поле, затем щелкнуть, чтобы увидеть, как оно работает. Вы пытались установить класс .blank по умолчанию?

<input autocomplete="off" class="blank" ....