Нам показалось полезным изменение поведение атрибута заглушки у браузеров Chrome и Safari, при котором текст не исчезал, пока пользователь не начинал печатать, а не при получении элементом фокуса. Конечно, атрибут заглушки не может заменить настоящее объяснение, для чего именно используется этот элемент ввода текста. Но если с помощью атрибута заглушки можно лучше понять, как заполнять это поля ввода текста, то его содержимое не должно исчезать слишком быстро.

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

Конечно, исследование не было всеобъемлющим, но такая ситуация действительно может встретиться.

Если нужно вернуть старое поведение в браузеры на движке Webkit, можно воспользоваться этим кодом CSS:

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

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

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s ease 0.5s;
  opacity: 0;
}

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

Последовательность событий в этой ситуации выглядит следующим образом:

• Пользователь нажимает или переключается, или делает что-то подобное, на элемент ввода.
• После этого он переводит взгляд на элемент ввода и обращает на него внимание.
• Он читает и обдумывает подсказку, которая дается с помощью текста атрибута заглушки.
• Текст атрибута заглушки исчезает.

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

Конечно, это не идеальный вариант. И в его основе не лежит полноценное исследование. Но мы предлагаем альтернативный подход к взаимодействию с пользователем, который кажется нам более удобным для пользователя.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Интересное оформление для элемента цитаты с использованием CSS
• Создание интересного поля ввода текста
• Создание необычного разворачивающегося поля ввода текста