Изменить поведение формы поиска - PullRequest
Новая
       15

Изменить поведение формы поиска

0 голосов
/ 13 ноября 2011

  1. Как мне отдельно стилизовать текст внутри поля поиска (справа)?Я хочу иметь светло-серый цвет, когда есть текст по умолчанию (ПОИСК), и я хочу черный цвет, когда человек вводит слово.

    • Я попытался обернуть функцию внутри нового div тег, но бесполезный, он дает мне ошибку PHP.

    • Я использовал FireBug, чтобы отследить проблему, но не смог разобраться сам.

  2. Когда вы пишете что-то в поиске (не нажимаете Enter) и затем нажимаете, текст, который вы написали, остается в поле поиска.Что я могу сделать, чтобы получить такой эффект, чтобы при каждом щелчке мышью вне поля поиска оно сбрасывалось на слово по умолчанию (в данном случае ПОИСК)?

    • Я пытался поиграть с onblur и onfocus но я не знаю, что изменить, чтобы получить желаемое поведение.

    • Я также использовал код для сброса формы, но это просто дает мне ту кнопку, которая у вас естьнажмите, чтобы сбросить текст по умолчанию.

  3. Если ответ на второй вопрос слишком сложен, я хотел бы получить следующее:

    • Когда сайт загружается - в поле поиска отображается ПОИСК.

    • Когда вы что-то вводите (не нажимаете Enter) и нажимаете, текст, который выввод остается НО ...

    • ... При повторном щелчке по этому полю поиска ранее введенный текст полностью выделяется, поэтому, если вы начинаете писать что-то новое, поле поиска показывает тольконовый текст.(В настоящий момент, если вы щелкнете по полю после щелчка, ваш новый текст будет просто добавлен к тексту, который вы вводили перед ним).

1 Ответ

0 голосов
/ 13 ноября 2011

Это работает как для № 1, так и для № 2 (проверено в FF, не уверен насчет IE).

onclick проверяет, находится ли значение по умолчанию в поле поиска, если оно, он очищается, и пользователь может напечатать что-то черным текстом.

Когда они щелкают, происходит событие onblur и проверяется, присутствует ли значение по умолчанию.Если это не так, значение сбрасывается и изменяется на светло-серый. 

<input type="text" name="search" value="SEARCH" style="color: #DDDDDD;"
    onclick="javascript: if( this.value == 'SEARCH') { this.value = ''; this.style.color = '#000000'; } "
    onblur="javascript: if( this.value != 'SEARCH') { this.value = 'SEARCH'; this.style.color = '#DDDDDD'; }" />
...