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

Как убрать 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.

stylenova / custom.js

Save stylenova/e4a7a79496d60ba45a4eb5e4b12581ba to your computer and use it in GitHub Desktop.

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

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’ ) ) ;

> ) ;

Footer

You can’t perform that action at this time.

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

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

О нас

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

Контакты

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

Как сделать чтобы функция применялась к каждому элементу? (Убрать placeholder при фокусе на input)

Как сделать чтоб placeholder удалялся у кажого input’a. В данному случае удаляется только у первого инпута Login Спасибо за ответ.

Отслеживать
24k 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);