Как настроить ввод данных в Input?

Question

[Айнур Ярулин]

1. Как с помощью JavaScript сделать так, чтобы при достижении определённого количества символов в input (например после 8) включились определённые CSS стили.

2. Как запретить ввод таких символов как !@#№$;%:^&?*() и так далее?

Answer 1

[WapSter]

Второе хз, так и не добрался до регулярок

Comments

[Айнур Ярулин]

спасибо)

Answer 2

[Александр]

2. Можете еще подсказать как запретить ввод таких символов как !@#№$;%:^&?*() и так далее?

например, так:
HTML:
<input type="text">
jQuery:

$("input").on('keyup', function() {
  let value = $(this).val();
  $(this).val(value.replace("!", '')); // заменит ! на пустоту
});

Comments

[Айнур Ярулин]

спасибо)

[Александр]

squadbrodyaga, успехов.

[Айнур Ярулин]

Александр, а можно как-то полностью запретить нажатие, а не просто заменить его?

[Александр]

squadbrodyaga, да, вполне.
я вам больше скажу, можно даже будет обойтись без jq.

[Айнур Ярулин]

Александр, очень благодарю, попробую как нибудь подстроить это в мой стрёмный код)

[Spartak (Web-StyleStudio)]

Александр,
Работает только если первым вводить "!", если сначала ввести что-то другое, а потом "!" то без проблем вводится...

Answer 3

[Spartak (Web-StyleStudio)]

HTML

<input class="class1" type="text" name="test" value="">

CSS

.class1 {
	background: white;
}
.class2 {
	background: red;
}

JS

document.querySelector('input').addEventListener('input', function() {
	this.value = this.value.replace(/[!@#№$;%:^&?*()]/, '');
	if (this.value.length >= 8) {
		this.classList.add('class2');
	} else {
		this.classList.remove('class2');
	} 
});

Comments

[Айнур Ярулин]

Спасибо)