Как вводить текст в инпуте только заглавными буквами?

Question

[Филипп Гаврилов]

Есть поле input, в которое должен вводиться текст только КАПСОМ. Не могу найти нормальных примеров реализации подобного.

text-transform: uppercase; - не подоходит, так как влияет только на отображения, не меняя сами данные

Answer 1

[0xD34F]

document.querySelector('input').addEventListener('input', function() {
  this.value = this.value.toUpperCase();
});

text-transform: uppercase; - не подходит, так как влияет только на отображения, не меняя сами данные

Кстати, подходит. Надо только будет выполнять .toUpperCase() при получении значения input'а.

Comments

[Филипп Гаврилов]

Спасибо! Что делать, если полей два и больше, не дублируя код?
https://jsfiddle.net/n4w87cra/3/

[Lordian]

Filgavrilov, querySelectorAll('input')

[0xD34F]

Либо, как уже посоветовали выше, найти все интересующие элементы с помощью querySelectorAll и назначить каждому обработчик. Либо повесить обработчик на document и проверять, удовлетворяет ли целевой элемент определённому условию, типа так (обратите внимание, последний инпут без класса - у него приведение значения к верхнему регистру не выполняется):

<input class="input1">
<input class="input1">
<input class="input1">

<input>

document.addEventListener('input', function(e) {
  if (e.target.classList.contains('input1')) {
    e.target.value = e.target.value.toUpperCase();
  }
});

[Филипп Гаврилов]

0xD34F, Lordian,

спасибо! на самом деле я пробовал с querySelectorAll, а не получалось просто из-за точки перед классом... невнимательность!