textarea内で改行を表示させないでenterkeyイベントを起こすには？

Question

タイトル通りなのですが、
それなりに多い文字数かつ改行不可のデータをtextareaに入力させ、それをエンターキー（keydown or keyup）で送信させようとしています。
textareaを使ったのは、inputだと折り返しができない（ですよね？）ためです。

しかしこうすると、enterkeyに反応して、textarea内に改行が入ってしまい、画面上改行表示が見えてしまいます。非常に不細工な状況になって困っています。

操作感の問題上、ctrl+etnerなどではなく、修飾キー無しのenterにしたいと思っています。
何かいい方法はないでしょうか。

よろしくお願いいたします。

なお、vueを利用しています。

Answer 1

<template>
  <div>
    <textarea @keydown.enter.prevent="handleSubmit"></textarea>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    handleSubmit () {
      console.log('submit!')
    }
  }
};
</script>

prevent修飾子をつけてあげれば、enter押下時に改行されなくなります。

Comments

[退会済みユーザー]

ありがとうございます！うまくいきました。