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>