JavaScriptでShift + Enterで送信を実装する

JavaScriptでtextareaをShift + Enterで送信する実装

<div>
    <textarea id="question" placeholder="質問を入力してください"></textarea>
    <button id="sendBtn">送信</button>
</div>

document.getElementById("question").addEventListener("keypress", e => {
    if (e.key === "Enter" && e.shiftKey) {
        e.preventDefault();

        const sendButton = document.getElementById("sendBtn");
        if (sendButton) {
            sendButton.click();
        }
    }
});

• 簡単な説明
  • addEventListener: keypressイベントを監視。
  • e.key === "Enter" && e.shiftKey: EnterキーとShiftキーが同時に押されたかをチェック。
  • e.preventDefault(): デフォルトの改行動作をキャンセル。
  • sendButton.click(): 送信ボタンをクリックと同じ処理を走らせる。

・Shift + EnterではなくCtrl + Enterで送信したい場合は、e.shiftkeyをe.ctrlKeyにするだけ。

Shift + Enterで改行、　Enterで送信したい場合はこちら

document.getElementById("question").addEventListener("keypress", e => {
    if (e.key === "Enter") {
        if (e.shiftKey) {
            // Shift + Enterの場合、デフォルトの改行動作を維持
            return;
        } else {
            // Enterのみの場合、送信処理をトリガー
            e.preventDefault(); // デフォルトの改行動作をキャンセル

            const sendButton = document.getElementById("sendBtn");
            if (sendButton) {
                sendButton.click(); // ボタンをクリックしたのと同じ動作
            }
        }
    }
});