Как убрать placeholder при фокусе

stylenova / custom.js

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// убрать placeholder при фокусе

$ ( ‘input,textarea’ ) . focus ( function ( )

$ ( this ) . data ( ‘placeholder’ , $ ( this ) . attr ( ‘placeholder’ ) ) ;

$ ( this ) . attr ( ‘placeholder’ , » ) ;

> ) ;

$ ( ‘input,textarea’ ) . blur ( function ( )

$ ( this ) . attr ( ‘placeholder’ , $ ( this ) . data ( ‘placeholder’ ) ) ;

> ) ;

Исчезающий placeholder при фокусе

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. Если мы посмотрим html-справочник, то найдем там следующее описание – выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.

К сожалению скрывание placeholder-а происходит по-разному – где то при получении фокуса, а где то при наличии хотя бы одного введенного символа. Мне нравится именно первый вариант, но как сделать его для всех браузеров, которые его поддерживают? Для этого определим следующие правила:

:focus::-webkit-input-placeholder < color: transparent >:focus::-moz-placeholder < color: transparent >:focus:-moz-placeholder < color: transparent >:focus:-ms-input-placeholder

Скрываем placeholder красиво

Как реализовать скрытие placeholder в одном стиле для всех браузеров разобрались, теперь посмотрим, как можно это анимировать.

Плавное изменение прозрачности:

input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder
input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder
input::-webkit-input-placeholder input::-moz-placeholder input:-moz-placeholder input:-ms-input-placeholder input:focus::-webkit-input-placeholder input:focus::-moz-placeholder input:focus:-moz-placeholder input:focus:-ms-input-placeholder

Поддержка устаревшими браузерами

Сейчас placeholder работает только в современных браузерах, но существует JS плагин, который позволяет не изобретая велосипедов делать этот атрибут кроссбраузерным – placeholder.js

Как убрать placeholder при клике по input

placeholder — это атрибут в html5, который выводит текст внутри поля input, и этот текст исчезает, когда пользователь начинает там писать свой текст. Это нужно, например, в форме поиска, чтобы убрать текст подсказки внутри неё при клике по ней.

Первый способ (рекомендуется): через css

input:focus::-webkit-input-placeholder < color:transparent; >input:focus:-moz-placeholder < color:transparent; >/* FF 4-18 */ input:focus::-moz-placeholder < color:transparent; >/* FF 19+ */ input:focus:-ms-input-placeholder < color:transparent; >/* IE 10+ */

Второй способ: через jquery

$(document).ready(function () < $('input,textarea').focus(function()< $(this).data('placeholder',$(this).attr('placeholder')) $(this).attr('placeholder',''); >); $('input,textarea').blur(function()< $(this).attr('placeholder',$(this).data('placeholder')); >); >);

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вам нужен сайт? С чего начать?

Проконсультируем, найдем оптимальное решение, подготовим индивидуальное предложение.

О нас

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

Контакты

Волынская область, г.Владимир-Волынский, ул.Гайдамацкая,24.
info@akweb.com.ua
+380(63)606-25-95