HYUDORO

勉強したことや日記など

Vue.jsでTextareaフォーカス時にReturnキーを押したらSubmit処理する

KeyboardEventを型として、keyとcodeの両方で"Enter"を検出する。 下記の例では、0文字のときは送信しなかったり、改行したいときの対策でShiftを押している時は送信しないようにしている。

<textarea v-model="text" @keypress="onInputKeyPress"></textarea>
onInputKeyPress(_e) {
    if (_e.key == "Enter" || _e.code == "Enter") {
        if (this.text.replace(/\s/g, "").length > 0 && !_e.shiftKey) {
            _e.preventDefault();
            // Submit系の処理
        }
    }
}