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

Question

Я пытаюсь установить значение по умолчанию для поля поиска.Идея заключается в том, что поле поиска имеет значение "Поиск" до тех пор, пока пользователь не нажмет на него, тогда оно должно быть пустым.Кроме того, пока оно "пустое" (со значением "Search" в качестве значения), оно должно иметь класс ".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 ... type="text" value="Search" />

Answer 4

Похоже, вам просто нужно установить начальное значение равным 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 5

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

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

Answer 6

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

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

Answer 7

Вот фрагмент, который я использую для этого.Могут быть более простые способы, но это работает.Для любого элемента с class .cleardefault его значение будет очищено при первом наведении курсора мыши.Любой элемент с class .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);
        });
    /*
    */
});