<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Исчезающий текст в input

Исчезающий текст в input

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

В основе лежит достаточно простой JavaScript, который можно уместить прямо в самом теге input:

<input type="text" name="name" style="color: #777;" value="Ваше имя" onfocus="if (this.value == 'Ваше имя') {this.value = ''; this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Ваше имя'; this.style.color = '#777';}" />

Поясняю алгоритм. Вначале у нас в поле серым цветом написано "Ваше имя". При получении фокуса на это поле вызывается обработчик события onfocus, в котором мы проверяем, если значение поля равно "Ваше имя", мы его стираем, плюс устанавливаем чёрный цвет. Если там написано что-то другое (пользователь ранее написал), то ничего не делаем.

При потере фокуса вызывается onblur, в котором мы смотрим значение текстового поля, и если оно пустое, то устанавливаем "Ваше имя" и ставим серый цвет.

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

Вот таким нехитрым образом делается исчезающий текст в input.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (11):

sync.o sync.o 19.12.2012 11:45:11

можно было бы просто воспользоваться атрибутом placeholder, но как всегда он не работает в ie

Ответить

fabrigas201 fabrigas201 19.12.2012 12:11:27

так это HTML 5

Ответить

mischa.samolkaev mischa.samolkaev 19.12.2012 18:11:09

Мне этот способ очень не нравится, т.к в нем имеется небольшой глюк, во есть <input type='text' value='Введите слова для поиска' onfocus='удали_подсказку(this)' onblur='покажи_подсказку(this)'/> Набираешь в поиске 'Введите слова для поиска', убираешь фокус для какий-то дел, ставишь фокус на текстовое поле и... почему удалился текст? Мне кажется что здесь нужно либо делать вторую проверку на цвет текста или ставить полю класс с тем что оно с подсказкой

Ответить

ppk-center ppk-center 19.12.2012 18:49:08

Беда в том,что для type="password" так сделать нельзя!

Ответить

Woozi Woozi 24.01.2013 01:18:52

Согласен с Михаилом. В случае введения текста, на который идет проверка, скрипт будет работать некорректно. Дополнительно добавлять проверку на цвет не стоит - ее можно сделать основной, так как конечный пользователь не может изменять цвета текста в поле ввода.

Ответить

lev_100rus lev_100rus 14.02.2013 19:36:10

Михаил дал вам основы, а доработать скрипт как вам надо вы можете и сами

Ответить

genyfild genyfild 13.05.2013 00:05:47

Кстати есть одно существенное предложение, было бы гораздо интересней, если бы ты сделал сразу пример работы скрипта.А то если честно суховато! Сведения очень полезные, но лучше если сразу у читателя есть возможность увидеть, пощелкать, ощутить. У тебя есть картинка под подзаголовком, вот преврати ее в input . Ну это мое пожелание :)

Ответить

genyfild genyfild 13.05.2013 00:10:49

А еще вопросик,планируется ли в будущем выход курса по JS, AJAX и jQuery ?

Ответить

Admin Admin 13.05.2013 10:02:12

Да, в конце июня будет.

Ответить

Yefim Yefim 03.06.2013 14:31:49

У меня вопрос начинающего: Почему указанный код (исчезающий текст в input.) не обрамляется тегом <script ...> Мало того. Когда я включил его в HTML-код, то (исчезающий текст в input.) вообще не работает. Спасибо

Ответить

Admin Admin 03.06.2013 18:27:44

Потому что в значении атрибутов не надо указывать <script>.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.