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

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

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

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

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

Синтаксис

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

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

oncompositionstart = (event) => {};

Тип события

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

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

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

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

Примеры

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

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

Пример в реальном времени

HTML

<div class="control">
  <label for="example">
    Focus the text-input control, then open your IME and begin typing.
  </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-compositionstart

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

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

См. также

Связанные события: compositionend, 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/compositionstart_event