Blog

enter キーで submit させつつ、IME の確定では submit させない方法

oninput を使うのが良さそう?

<script lang="ts">

    import {emit} from "@tauri-apps/api/event";
    import type {MessageRepository} from "./repository/MessageRepository";
    import type {Message} from "./Message";

    export let replyTo: Message | null;
    export let messageRepository: MessageRepository;

    let body="";
    let inserted = true;

    async function send() {
        if (body.length > 0 && body.match(/\S/)) {
            if (replyTo) {
                await messageRepository.reply(replyTo, body);
            } else {
                await messageRepository.post(body);
            }
            await emit("sent_message");
        }
        body = "";
    }

    function handleKeydown(event: KeyboardEvent) {
        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
            return;
        }
        if (inserted) {
            inserted = false; // ignore the insertFromComposition event.
            return;
        }

        if (event.key === 'Enter') {
            event.preventDefault();

            send();
        }
    }

    function handleInput(event: InputEvent) {
        if (event.inputType === "insertFromComposition") {
            inserted = true;
        }
    }
</script>

<div>
    <form on:submit|preventDefault={send}>
        <textarea bind:value={body} cols="40" rows="3" on:keyup={handleKeydown}
                  on:input={handleInput}
        ></textarea>
        <button type="submit">Send</button>
    </form>
</div>