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

Базовая линия Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузера. Она доступна в браузерах с апреля 2017 года.

Событие compositionupdate срабатывает, когда новый символ получен в контексте сеанса составления текста, управляемого системой составления текста, такой как редактор метода ввода.

Например, это событие может быть вызвано, когда пользователь вводит китайский символ с помощью Pinyin редактор метода ввода.

Синтаксис

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

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

oncompositionupdate = (event) => {};

Тип события

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

Свойства события

Этот интерфейс также наследует свойства своего родителя, UIEvent, и своего предка — Event.

CompositionEvent.data Только для чтения: Возвращает символы, сгенерированные методом ввода, который вызвал событие; он изменяется в зависимости от типа события, которое сгенерировало объект CompositionEvent.
CompositionEvent.locale Только для чтения Устаревший: Возвращает локаль текущего метода ввода (например, локаль раскладки клавиатуры, если составление связано с редактором метода ввода).

Примеры

const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionupdate", (event) => {
  console.log(`generated characters were: ${event.data}`);
});

Пример с живым исполнением

HTML

<div class="control">
  <label for="example">
    First select textbox, then to open IME:
    <ul>
      <li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="25"
    id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>

JavaScript

const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);

Результат

Спецификации

Спецификация
События UI # event-type-compositionupdate

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`compositionupdate_event`	18	12	9	15	5	18	9	14	5	1.0	≤37

См. также

Связанные события: compositionstart, compositionend.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event