CompositionEvent

阿超

发布于 2022-08-21 13:50:42

2200

发布于 2022-08-21 13:50:42

文章被收录于专栏：快乐阿超

分享一个输入法事件：CompositionEvent

这个事件只在用户间接输入文本（如使用输入法）时触发：

例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
    <div class="control">
        <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
        <input type="text" id="example" name="example">
    </div>

    <div class="event-log">
        <label>Event log:</label>
        <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
        <button class="clear-log">Clear</button>
    </div>
    <script>
        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);
    </script>
</body>
</html>