Ввод только букв, а не цифр

130

21 октября 2021, 19:00

document.getElementById("btn").onclick = go; 
 
function go() { 
  let x = document.getElementById("in").value; 
  let z = document.getElementById("out"); 
 
  if (x) { 
    z.innerHTML = `Привет ${x}, хорошего дня!`; 
  } else { 
    alert("введите имя"); 
  } 
}

<p><input type="text" id="in"> Введите ваше имя</p> 
<p id="out"></p> 
<button id="btn">enter</button>

Подскажите пожалуйста, как задать значение, чтоб в input вводились только буквы, но не цифры ;(

Answer 1

Можно проверять нажатую кнопку через событие 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>

Answer 2

Здравствуйте, Павел.

#1

Вы можете использовать событие oninput и регулярное выражение:

<p><input type="text" id="in" oninput="this.value=this.value.replace(/[^a-zA-Z]/g,'');"> Введите ваше имя</p>
<p id="out"></p>
<button id="btn">enter</button>

UPD: Вариант с фиксом перескачивающей каретки:

<p><input type="text" id="in" oninput="if(/[^a-zA-Z]/.test(this.value)){let Selection = this.selectionStart-1;this.value=this.value.replace(/[^a-zA-Z]/g,'');this.setSelectionRange(Selection, Selection);}"> Введите ваше имя</p>
<p id="out"></p>
<button id="btn">enter</button>

#2

Так же можно использовать атрибут pattern если Вы работаете на HTML5:

input:invalid {
    border-color: #C72D34;
}

<form>
  <p><input type="text" id="in" style='outline:none;' pattern="[a-zA-Z]+"/> Введите ваше имя</p>
  <p id="out"></p>
  <button id="btn">enter</button>
</form>

#3

Если вы работаете с jQuery можно использовать его:

$("#in").on("input", function(){
    $(this).val( $(this).val().replace(/[^a-zA-Z]/g,'') );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" id="in"> Введите ваше имя</p>
<p id="out"></p>
<button id="btn">enter</button>

UPD: Вариант с фиксом перескачивающей каретки:

$("#in").on("input", function(){
    if(/[^a-zA-Z]/.test($(this).val())){
        let Selection = this.selectionStart-1;
        $(this).val( $(this).val().replace(/[^a-zA-Z]/g,'') );
        this.setSelectionRange(Selection, Selection)
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" id="in"> Введите ваше имя</p>
<p id="out"></p>
<button id="btn">enter</button>

Измените [^a-zA-Z] на [^a-zA-ZА-Яа-яЁё] если хотите разрешить русские буквы.

Так же советую ознакомится с этим гайдом по регулярным выражениям.