Можно проверять нажатую кнопку через событие keydown
event.key — если оно будет содержать число - return
прерывает выполнение функции, а event.preventDefault()
отключает дефолтное поведение события (символ не печатается).
UPD: А что делать, если значение вставляется из буфера обмена... (c) Stepan Kasyanenko
→ При печати, сперва срабатывает событие keydown
, потом keyup
, потом input
. Первые 2 работают только при нажатии кнопок, а input - при любом изменении значения поля, в том числе и через копипаст. Поэтому дело дойдет до инпута только при вставке иным способом, кроме ручной печати.
let jin = document.getElementById("in");
let jout = document.getElementById("out");
let btn = document.getElementById("btn");
jin.addEventListener('keydown', function(e){
if( e.key.match(/[0-9]/) ) return e.preventDefault();
}); // Будет перехватывать все числа при ручном вводе.
// Тажке нужна, чтобы replace не сбрасывал каретку, срабатывая каждый раз.
jin.addEventListener('input', function(e){
// На случай, если умудрились ввести через копипаст или авто-дополнение.
jin.value = jin.value.replace(/[0-9]/g, "");
});
btn.addEventListener('click', function(){
let val = jin.value;
if ( val ) {
jout.textContent = `Привет ${val}, хорошего дня!`;
} else {
alert("введите имя");
}
});
<input id="in" placeholder="Ваше Имя">
<button id="btn">Enter</button>
<p id="out"></p>
Для on-событий вместо preventDefault eсть return false;
P.s. внутри всех событий есть объект event, который содержит кучу информации про событие:
elem.addEventListener('click', function(bubu){
console.log( event ); // В консоли браузера будет удобнее смотреть, чем здесь.
// console.log( bubu ); — то же самое.
// Если у функции указан аргумент - он тоже начинает ссылаться на объект event
// Часто в качестве аргумента указывают букву 'e'
});
<button id="elem">Elem</button>