Как убрать 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.
Как сделать чтобы функция применялась к каждому элементу? (Убрать placeholder при фокусе на input)
Как сделать чтоб placeholder удалялся у кажого input’a. В данному случае удаляется только у первого инпута Login Спасибо за ответ.
Отслеживать
23.8k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
задан 2 мар 2021 в 15:25
onfocus=»this.placeholder = »»
2 мар 2021 в 15:44
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Читайте код, чтобы его понимать.
Вы вешаете обработчик только на один элемент — document.querySelector(«.login_input»)
Чтобы повесить на несколько, нужно «повесить на несколько», например так
let elements = document.querySelectorAll('input'); // Возмём !все! элементы input, т.е. наша переменная является массивом с этими элементами. elements.forEach(function(e)< // Проходим циклом по всем элементам e.addEventListener('focus', function(e)< // И на каждый вешаем один и тот же обработчик e.target.value = 'FOCUS'; >); e.addEventListener('blur', function(e)< e.target.value = ''; >); >);Или пользуемся делегирование событий, это лучший вариант (ИМХО).
Подробнее почитайте тут — ссылка
document.body.addEventListener('focus', function(e) < //Обработчик вешается уже какой-то родитель, который содержит в себе все эти элементы. if(e.target.tagName === 'INPUT') < e.target.value = 'FOCUS'; >>, true); document.body.addEventListener('blur', function(e) < if(e.target.tagName === 'INPUT') < e.target.value = ''; >>, true);Стилизация placeholder
Placeholder’ом можно легко заменить целую строчку текста над input’ом, что отлично экономит место и делает форму более привлекательной. Рассмотрим варианты стилизации и исчезания надписи при фокусе.
- Изменение цвета placeholder. В этом случае просто задается стиль color (с поддержкой различных браузеров)
- Убрать placeholder при фокусе. Многим удобнее, когда помогающая надпись исчезает при фокусе. Для этого стоит присвоить стиль color: transparent
- Плавное исчезание placeholder. С помощью transition можно придать плавность трансформации/изменения цвета и т.д.
- Плавный сдвиг в сторону. Сдвиг текста удачно реализуется с помощью отступа первой строки блока текста. За это отвечает свойство text-indent
Возможно, вам будет интересно:
Выпадающее меню при наведении и клике js
Подсказка в поле формы
Подсказки в полях формы помогают пользователю понять, какие данные ему надо вводить. Для есть атрибут placeholder, он выводит в поле текст, который исчезает при наборе текста. С помощью псевдокласса :focus и псевдоэлемента ::placeholder можно изменить вид подсказки, чтобы при получении фокуса она сдвигалась вверх и уменьшалась (рис. 1).
Рис. 1. Изменение вида подсказки
Стиль подсказки устанавливается через селектор ::placeholder — зададим серый цвет текста с помощью свойства color и время трансформации через transition.
input::placeholder < transition: 0.5s; /* Время трансформации */ color: #aaa; /* Цвет подсказки */ >Вид подсказки при получении полем фокуса устанавливается через селектор :focus::placeholder . В стилевых правилах зададим размер шрифта через свойство font-size и переместим подсказку через transform с функцией translateY . Отрицательное значение сдвинет подсказку вверх.
input:focus::placeholder < font-size: 10px; /* Размер шрифта */ transform: translateY(-16px); /* Сдвигаем вверх */ >Остальной код нужен для красоты и приведён в примере 1.
Пример 1. Изменение подсказки при фокусе
К сожалению, данный вариант не является универсальным и не работает желаемым образом в браузерах Internet Explorer и Firefox. Так что приведём альтернативное решение, когда подсказка выводится с помощью элемента . Каждую строку заключим в с классом row , а внутрь вставим и , связав их друг с другом через атрибуты id и for .
Логин Стиль для останется тем же, что и в примере 1, и добавится только стиль для . Чтобы текст подсказки отображался поверх поля формы превращаем в блочный элемент и смещаем его вверх через свойство transform с функцией translateY . Так же важно задать постоянный line-height, поскольку шрифт при фокусе будет уменьшаться, соответственно, уменьшаться и межстрочное расстояние, что приведёт к «скачкам» текста. Здесь же ставим и время трансформации подсказки.
.row label < display: block; /* Блочный элемент */ color: #aaa; /* Цвет подсказки */ transform: translateY(-1.5rem); /* Сдвигаем вверх */ line-height: 1rem; /* Межстрочный интервал */ transition: 0.5s; /* Время трансформации */ >Для определения стиля подсказки при получении фокуса используем селектор input:focus+label . Но этого недостаточно, ведь если набрать в поле текст и убрать фокус, подсказка вернётся в своё исходное положение и будет отображаться поверх введённого текста. Нам надо сделать так, что если в поле содержится текст, то подсказка остаётся вверху. Для этого подключаем селектор input:valid+label , он задаёт стиль , когда в введён корректный текст.
.row input:focus + label, .row input:valid + label < font-size: 10px; /* Размер шрифта */ transform: translateY(-2.5rem); /* Сдвигаем вверх */ >Псевдокласс :valid работает для полей формы, когда в них вставлен атрибут required. Так что в коде HTML добавляем этот атрибут к , как показано в примере 2.
Пример 2. Подсказка через
См. также
- Аккордеон меню
- Атрибут placeholder
- Вкладки на CSS
- Выпадающее меню
- Использование :checked
- Подсказывающий текст
- Пользовательские формы
- Псевдокласс :invalid
- Псевдокласс :placeholder-shown
- Псевдокласс :valid
- Псевдоэлемент ::placeholder
- Стилизация переключателей
- Стилизация флажков
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label