EditContext: событие compositionend

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Экспериментально: Это экспериментальная технология
Перед использованием в продакшене внимательно проверьте таблицу совместимости браузеров.

Событие compositionend интерфейса EditContext срабатывает при завершении составления текста с помощью окна редактора методов ввода (IME).

Синтаксис

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

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

oncompositionend = (event) => {};

Примеры

Использование `compositionend` для изменения границы области редактирования

В следующем примере граница области редактирования устанавливается в красный цвет при срабатывании события compositionstart, и возвращается в черный при срабатывании события compositionend. Обратите внимание, что обратные вызовы обработчиков событий в этом примере вызываются только при использовании окна IME или других платформ, обеспечивающих редактирование, для составления текста.

#text-editor {
  border: 1px solid black;
}
#text-editor.is-composing {
  border-color: red;
}

<div id="text-editor"></div>

const editorElement = document.getElementById("text-editor");
const editContext = new EditContext();
editorElement.editContext = editContext;

editContext.addEventListener("compositionstart", (event) => {
  editorElement.classList.add("is-composing");
});

editContext.addEventListener("compositionend", (event) => {
  editorElement.classList.remove("is-composing");
});

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

Спецификация
API EditContext # dom-editcontext-oncompositionend

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`compositionend_event`	121	121	Нет	107	Нет	121	Нет	81	Нет	25.0	121

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

Синтаксис

Примеры

Использование compositionend для изменения границы области редактирования

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

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

Использование `compositionend` для изменения границы области редактирования