Как запретить ввод символов в Input на JavaScript

Всем привет. Довольно часто появляется необходимость по тем или иным причинам запретить пользователю вводить в инпуты или другие текстовые поля определенные символы. например можно запретить ввод цифр или наоборот разрешить ввод только чисел, а буквы разрешить. К счастью на JS это легко реализовать. И для того, чтобы это сделать, так же как и при валидации данных формы, нам потребуется регулярное выражение. Какое именно, зависит от того, что нам нужно запретить для ввода. Давайте рассмотрим несколько вариантов.

1
2
3
4
5
6

let name = document.querySelector('#name'); // Получаем input
let regex = /[0-9]/g; // регулярка только цифры
 
name.oninput = function(){
    this.value = this.value.replace(regex, '');
  }

На этом можно было бы завершить, так как все, что было нужно, мы сделали, но давайте разберем этот пример более детально. В первой строке мы вносим в переменную name наш input с id name. Во второй строке в переменную regex занесли то самое регулярное выражение, которое и является основой нашей программы. На четвертой строке мы на инпут вешаем событие oninput, при котором будет срабатывать встроенная в JavaScript функция замены replace, которая принимает в себя два параметра. Первый — что она будет заменять и второй — на что. В нашем случае символы из регулярного выражения мы заме6няем на пустую строку. Другими словами, если мы попробуем напечатать цифры, то они просто не будут отображаться. Проверьте сами.

Демо

Как вы уже, наверное, догадались делать замену можно не только на пустоту, но и на любые другие символы. К примеру можно поставить звездочку. И тогда все символы, как при вводе пароля, будут закрыты звездочками. Точно так же, как при input type=»password»

this.value = this.value.replace(regex, '*');

Если вам моя писанина на тему того, как запретить ввод символов в Input на JavaScript, была не совсем понятна, то предлагаю посмотреть на эту тему видео.