Как добавлять класс инпуту, на который кликнули?

Question

[DeniSidorenko]

Есть тег input, и когда он активный ему надо задать класс active. Активный - т.е., кликнули и можно писать. Как называется события для отлавливания активный ли input или нет?

Comments

[Ярослав Иванов]

focus

Answer 1

[0xD34F]

$('input').on('focus blur', function(e) {
  $(this).toggleClass('active', e.type === 'focus');
});

или

const onFocus = e => e.target.classList.toggle('active', e.type === 'focus');

document.querySelectorAll('input').forEach(n => {
  n.addEventListener('focus', onFocus);
  n.addEventListener('blur', onFocus);
});

А вообще - надо ли добавлять какие-то классы? Есть же :focus.

Comments

[DeniSidorenko]

Скажи пожалуйста, в данном скрипте ты указал такое действие для input'a . Как модифицировать что бы был и инпут и textarea

[0xD34F]

Ну тогда, наверное, надо заменить селектор с 'input' на 'input, textarea'. Что скажете?

[DeniSidorenko]

0xD34F, Да , спасибо большое

Answer 2

[Александр]

focus/blur