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

Базовая Широко поддерживается

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

Событие compositionend срабатывает, когда система ввода текста, например, редактор методов ввода, завершает или отменяет текущую сессию ввода.

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

Синтаксис

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

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

oncompositionend = (event) => {};

Тип события

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

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

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

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

Примеры

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

inputElement.addEventListener("compositionend", (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 Events # event-type-compositionend

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

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

См. также

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

© 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/compositionend_event