Авто-скрытие текста placeholder при фокусе: CSS/jQuery

Быстрый ответ

Для того чтобы скрыть текст подсказки сразу после фокусировки, примените следующее правило CSS:

/* Необъяснимо исчезающее, подобно моему энтузиазму по понедельникам */
input:focus::placeholder { opacity: 0; }

Сочетание псевдоэлемента ::placeholder с селектором :focus делает текст подсказки прозрачным немедленно по началу пользовательского ввода.

Совместимость с разными браузерами (или "Почему мы не можем просто ладить?")

Борьба за совместимость браузеров – непростое дело. Чтобы ваш метод работал во всех браузерах, добавьте вендорные префиксы:

/* Страховочная мерка для тех, кто страхуется от неожиданностей */
input:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome/Opera/Safari */
input:focus::-moz-placeholder { opacity: 0; } /* Firefox 19+ */
input:focus:-moz-placeholder { opacity: 0; } /* Firefox 4-18 */
input:focus:-ms-input-placeholder { opacity: 0; } /* Internet Explorer 10+ */

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

Плавное исчезновение текста подсказки с помощью эффекта перехода

Сделайте исчезновение подсказки более плавным, чтобы пользователь не испугался:

/* Нежные нюансы плавного процесса перехода в CSS */
input::placeholder {
  transition: opacity 0.3s;
}

Благодаря свойству transition, текст подсказки будет плавно затихать, подобно моим новогодним установкам.

Добавление меток для улучшения восприятия

Для повышения удобства доступа иногда следует использовать комплект из трех элементов: поля ввода, текста подсказки и метки:

/* Как на романтическом свидании, где третий лишним не бывает */
label.overlabel {
  position: absolute;
  pointer-events: none;
  transition: opacity 0.3s;
}
input:focus + label.overlabel {
  opacity: 0;
}

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

Визуализация

Оцените визуально принцип работы вашей подсказки:

🏡 <input placeholder="🎅 Введите текст...">
🏡 <input>:focus::placeholder {
  opacity: 0;  // 🎅 украдкой исчезает в дымоходе!
}

Теперь подсказка исчезает при фокусе, не отвлекая пользователя.

jQuery: Ведь хорошего кода много не бывает?

Если вы отдаете предпочтение jQuery, вы можете достичь того же эффекта следующим образом:

/* jQuery в деле – как скрыть подсказку, знают теперь все */
$('input').on('focusin', function(){
  $(this).data('placeholder', $(this).attr('placeholder'));
  $(this).attr('placeholder', '');
});
$('input').on('focusout', function(){
  $(this).attr('placeholder', $(this).data('placeholder'));
});

Такой подход сохраняет текст подсказки до его исчезновения и восстанавливает его после того, как фокус ушел.

Обойдите стандартные стили браузера с помощью -webkit-appearance: none

Иногда стандартные стили браузера могут помешать ваших намерениям:

/* Всего в наших руках */
input {
  -webkit-appearance: none;
  /* ...добавляем наши стили... */
}

Свойство -webkit-appearance: none; игнорирует стандартные стили браузера, позволяя вам поддерживать желаемое оформление.

Интерактивная площадка для тестов

Лучший способ проверить новые идеи — испытывать их в реальных условиях. Пользуйтесь JSFiddle или Stack Snippets для тестирования и перенастройки вашего кода, учитывая возможные проблемы с совместимостью.

Полезные материалы

1. Элемент Input (Форма ввода) – HTML | MDN: Знатовство — это сила... и особенно когда речь идет о руководстве MDN по подсказкам.
2. ::placeholder | CSS-Tricks: Для тех, кто хочет погрузиться в детали работы CSS подсказок.
3. Событие focus | jQuery API Documentation: Знакомство с jQuery начинается с изучения официальной документации.
4. Селекторы уровня 4 — Изучайте CSS вместе с последней спецификацией W3C по псевдоклассам.