input composition events All In One

input composition events All In One.md

input composition events All In One

composition events

https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

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 = log.textContent + `${event.type}: ${event.data}\n`;
}

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

https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

https://developer.mozilla.org/en-US/docs/Glossary/input_method_editor

refs

https://www.cnblogs.com/xgqfrms/p/13934553.html

w3c/input-events#86

https://gist.github.com/zerobase/7884477