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
  • 1
    ru.stackoverflow.com/q/556333/256824
    – user256824
    Commented 4 нояб. 2019 в 9:05
  • не очень так то понятно.... я только начинаю учить js и jqury не знаю (( Commented 4 нояб. 2019 в 9:17

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 или идет автозаполнение на мобильном? Commented 4 нояб. 2019 в 9:42
  • @StepanKasyanenko Упс. Тогда аффтару стоит принять соседний ответ) Commented 4 нояб. 2019 в 9:46
  • Соседний ответ тоже не универсальный - первый и третий варианты - прыгает каретка в конец инпута. Второй вариант лучше всего, но не совсем то - не запрещает цифры, а показывает предупреждение. Commented 4 нояб. 2019 в 9:53
  • @StepanKasyanenko Поправил баг с кареткой. Второй вариант здесь для полноты, может ТС-у он понравится.
    – Buzzard
    Commented 4 нояб. 2019 в 10:50
  • @BuzzardDoc отлично получилось! ИМХО - второй вариант самый лучший. Разве вам бы еще поправить регулярное выражение - добавить g модификатор. Иначе при вставке 123 строки replace заменит только один символ. Commented 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А-Яа-яЁё] если хотите разрешить русские буквы.

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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