0

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 вводились только буквы, но не цифры ;(

2

2 ответа 2

4

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

6
  • 1
    А что делать, если значение вставляется из буфера обмена, вставляется через drag&drop или идет автозаполнение на мобильном? 4 ноя 2019 в 9:42
  • @StepanKasyanenko Упс. Тогда аффтару стоит принять соседний ответ) 4 ноя 2019 в 9:46
  • Соседний ответ тоже не универсальный - первый и третий варианты - прыгает каретка в конец инпута. Второй вариант лучше всего, но не совсем то - не запрещает цифры, а показывает предупреждение. 4 ноя 2019 в 9:53
  • @StepanKasyanenko Поправил баг с кареткой. Второй вариант здесь для полноты, может ТС-у он понравится.
    – Buzzard
    4 ноя 2019 в 10:50
  • @BuzzardDoc отлично получилось! ИМХО - второй вариант самый лучший. Разве вам бы еще поправить регулярное выражение - добавить g модификатор. Иначе при вставке 123 строки replace заменит только один символ. 4 ноя 2019 в 11:39
3

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

#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А-Яа-яЁё] если хотите разрешить русские буквы.

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.