Блог

Главная - Вопросы по программированию - Изменить поведение формы поиска

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

#php #javascript #search #uitextfield #search-form

#php #javascript #Поиск #uitextfield #форма поиска

Вопрос:

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

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

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

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

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

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

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

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

    • Когда вы вводите что-либо (не нажимайте Enter) и щелкаете мышью, текст, который вы вводите, остается, НО…

    • … Когда вы снова нажимаете на это поле поиска, ранее введенный текст полностью выделяется, так что, если вы начнете писать что-то новое, в поле поиска отображается только новый текст. (На данный момент, если вы нажмете на файл после щелчка, ваш новый текст просто будет добавлен к тексту, который вы ввели перед ним).

Комментарии:

1. PHP не волнует, что вы делаете с содержимым HTML, ошибка, скорее всего, произошла из-за синтаксической ошибки в коде. Если вы опубликуете, что вы делали при добавлении <div> , мы можем сообщить вам, где это было.

2. Ну, я попробовал обернуть onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" внутри div с идентификатором, потому что я думал, что это даст мне возможность настроить таргетинг на вводимый текст. Я могу изменить стиль всего текста (по умолчанию и ввода), изменив #st но я не могу настроить таргетинг только на один из этих двух.

3. Я удалил вашу мертвую ссылку.

Ответ №1:

Для меня это работает как для # 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'; }" />

Комментарии:

1. Это потрясающе, спасибо! Я поиграл с существующим кодом и вашим кодом и обнаружил, что когда я добавляю onfocus функцию, первый ввод имеет серый цвет, а после того, как вы щелкнете в сторону, а затем вернетесь в поле, вы получите черный ввод. Не имеет значения, поскольку я удалил onfocus но это показалось мне интересным. 😀 Вопрос — может быть, вы можете посмотреть, что я напутал, из-за чего функция поиска больше не работает? :/ Очевидно, я что-то удалил, и теперь, когда я ищу слово, оно остается на той же странице.

2. Поиск работает для меня, когда я нажимаю enter — Но что может произойти, так это то, что onblur событие запускается до отправки формы, что приведет к возврату ввода обратно к «ПОИСКУ»

3. Попробуйте ввести «GOA» в форму поиска. Результат поиска должен показывать только нижнюю запись. Вместо этого он показывает оба сообщения и просто изменяет адрес на http://thefalljourneyindia.iblogger.org/?st=goa .

4. Для вашей формы установлено значение method=GET , поэтому вы получаете изменение URL. Если вы ожидаете ввести параметр POST, измените метод form. В противном случае форма правильно вставляет st поле в URL.

5. Хорошо, мне придется прочитать об этом в другом месте, чтобы полностью понять, что вы имеете в виду, и я задам новый вопрос, если после этого не смогу разобраться. Спасибо за всю вашу помощь.