Добавление искомого текста по умолчанию к HTML окна поиска

Я работаю над добавляющим текстом "поиска" к окну поиска. Я пытаюсь достигнуть:

onfocus: исчезните текст

И

onblur: вновь появитесь текст

До сих пор я достиг этого, но у меня был к hardcode он в HTML:

например.

<input type="text" name="s" id="search-text" size="15" value="Search"  
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">

И if I add this the of my .html file I am getting the same result:

например.

<script type="text/javascript">
var defaultText = "Search...";
var searchBox = document.getElementById("search");

//default text after load
searchBox.value = defaultText;

//on focus behaviour
searchBox.onfocus = function() {
    if (this.value == defaultText) {//clear text field
        this.value = '';
    }
}

//on blur behaviour
searchBox.onblur = function() {
    if (this.value == "") {//restore default text
        this.value = defaultText;
    }
}
</script>

(любезность: http://zenverse.net/javascript-search-box-show-default-text-on-load/)

То, чего я пытаюсь достигнуть, использует вышеупомянутый код во внешнем .js файле, но неважно, что я, я не могу управлять к обратной ссылке кодом к своему окну поиска в моем .html файле.

I am sorry if this is a bad question I have made about 10 different .html И .js files swapping И remapping code И still can't get it to work without having the JavaScript in the actual .html file.

Любой помощью было бы очень ценившее Спасибо.

1
nl ja de
попытайтесь использовать заполнителя
добавлено автор Champ, источник

4 ответы

Используйте заполнитель html5 собственность:

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

Here's a small Fiddle with the input element.

Заметьте, что текст на самом деле не уходит, пока пользователь не вводит некоторый текст, сам. Таким образом, пользователь будет видеть намек дольше.

12
добавлено
Спасибо работало очарование:) смотрит намного лучше.
добавлено автор Otis Wright, источник

try using Html Placeholder

<input type="text" name="s" id="search-text" size="15" value="" Placeholder="Search" >

Новывсеещехотите,делаютэтосJavaScript,посмотритеdemo

0
добавлено
Извините за ту глупую ошибку.
добавлено автор Champ, источник
W3fools . То место полно плохих примеров. Кроме того, я думаю вы might' ve сделал ошибку copy/paste-ing.;-)
добавлено автор Cerbrus, источник

Могло бы быть полезным, чтобы смотреть на Заполнитель jQuery поскольку заполнитель поддерживает в более старых браузерах.

0
добавлено

Используйте ниже сценария, он хорошо работает.

<script type="text/javascript">
 var defaultText = "Sitede ara…";
 var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");

 //default text after load
 searchBox.value = defaultText;

 //on focus behaviour
 searchBox.onfocus = function() {
     if (this.value == defaultText) {//clear text field
         this.value = '';
     }
 }

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

SEO chat
SEO chat
5 476 участник(ов)

Чат про SEO. Speak Russian! Др.чаты: @ppcchat @uiux_chat @devschat @smmhell Работа: @seohr Канал: @seolife Аудит: tpv.sr/1QoBSBb Стата: tpv.sr/1QoBMrK/ Запрещено: - мат и брань - команды ботам - реклама, вакансии - религия, политика, наркота, крипта

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing