Когда дело доходит до создания интерактивных веб-форм или захвата пользовательского ввода, HTML предоставляет несколько атрибутов событий для обработки различных действий пользователя. В этой статье мы сосредоточимся на двух популярных атрибутах событий: oninput и onkeypress. Мы рассмотрим их различия, варианты использования и предоставим практические примеры кода, которые помогут вам понять и эффективно использовать эти события.

Понимание oninput:
Событие oninput запускается всякий раз, когда изменяется значение элемента ввода. Это универсальное событие, которое работает с различными типами ввода, включая текстовые поля, флажки, переключатели и многое другое. Вот пример того, как вы можете использовать oninput для динамического отображения введенного текста:

<input type="text" oninput="displayText(this.value)">
<script>
  function displayText(value) {
    console.log(value);
  }
</script>

В приведенном выше примере, когда пользователь вводит текст в поле ввода, вызывается функция displayText, которая записывает введенное значение в консоль. Вы можете настроить функцию для выполнения любых желаемых действий, таких как обновление предварительного просмотра в реальном времени или проверка ввода.

Изучение нажатия клавиши
С другой стороны, событие onkeypress срабатывает, когда клавиша нажимается и удерживается, пока фокус находится на элементе ввода. Он обычно используется для захвата ввода определенных клавиш, ограничения определенных символов или реализации сочетаний клавиш. Вот пример, который ограничивает ввод только числовыми значениями с помощью onkeypress:

<input type="text" onkeypress="return onlyNumeric(event)">
<script>
  function onlyNumeric(event) {
    const keyCode = event.which || event.keyCode;
    const valid = (keyCode >= 48 && keyCode <= 57) || keyCode === 8;
    return valid;
  }
</script>

В приведенном выше примере функция onlyNumericпроверяет, соответствует ли код клавиши числовому значению или клавише возврата (keyCode 8). Если условие истинно, ввод разрешен; в противном случае он блокируется.

Объединение событий oninput и onkeypress.
Чтобы обеспечить удобство работы пользователя, вы можете объединить события oninput и onkeypress для одновременной обработки различных сценариев. Например, вы можете использовать oninput для обновления количества живых символов, в то время как onkeypress ограничивает ввод определенной длиной:

<input type="text" oninput="updateCharacterCount(this.value)" onkeypress="return limitInputLength(event)">
<script>
  function updateCharacterCount(value) {
    const count = value.length;
    console.log(`Character Count: ${count}`);
  }
  function limitInputLength(event) {
    const maxLength = 10;
    return event.target.value.length < maxLength;
  }
</script>

В приведенном выше примере, когда пользователь печатает, функция updateCharacterCountрегистрирует текущее количество символов, а функция limitInputLengthограничивает ввод максимальной длиной в 10 символов..

Используя возможности событий oninput и onkeypress в HTML, вы можете создавать динамические и удобные для пользователя веб-формы. Событие oninput позволяет вам реагировать на изменения в режиме реального времени, а событие onkeypress позволяет вам контролировать ввод и обеспечивать его соответствие вашим требованиям. Объединив эти события, вы сможете обеспечить удобство взаимодействия с пользователем и улучшить общую функциональность ваших веб-приложений.