Элемент: событие beforeinput

Событие DOM beforeinput срабатывает, когда значение элемента <input> или <textarea> собирается измениться. Однако в отличие от события input, оно не срабатывает для элемента <select>. Событие также применяется к элементам с включённым contenteditable и к любому элементу, когда включён designMode.

Это позволяет веб-приложениям переопределять поведение редактирования текста до того, как браузер изменит дерево DOM, и обеспечивает больший контроль над событиями ввода для повышения производительности.

В случае contenteditable и designMode, целевым объектом события является **элемент-хост редактирования**. Если эти свойства применяются к нескольким элементам, элементом-хостом редактирования является ближайший родительский элемент, чьим родителем не является элемент для редактирования.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("beforeinput", (event) => {});

onbeforeinput = (event) => {};

Объект InputEvent. Наследуется от UIEvent.

Этот интерфейс наследует свойства от своих родительских элементов, UIEvent и Event.

InputEvent.data Только для чтения

Возвращает строку с вставленными символами. Может быть пустой строкой, если изменение не вставляет текст (например, при удалении символов).

InputEvent.dataTransfer Только для чтения

Возвращает объект DataTransfer, содержащий информацию о форматированном или простом тексте, добавляемом или удаляемом из редактируемого содержимого.

InputEvent.inputType Только для чтения

Возвращает тип изменения редактируемого содержимого, например, вставка, удаление или форматирование текста.

InputEvent.isComposing Только для чтения

Возвращает значение Boolean, указывающее, срабатывает ли событие после compositionstart и перед compositionend.

Следующая функция возвращает true, если beforeinput, а значит, getTargetRanges, поддерживается.

function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}

Этот пример записывает текущее значение элемента непосредственно перед заменой этого значения новым значением, применённым к элементу <input>.

HTML

<input placeholder="Enter some text" name="name" />
<p id="values"></p>

JavaScript

const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Результат

• Связанное событие: input