テキストエリアでの改行の防止

Question

私はVueを使ってチャット機能を使っています。入力にはテキストエリアを使用していますので、長いメッセージを書くユーザーにとってオーバーフローが回避され、読みやすくなります。残念なことに、ユーザーがキーを押し下げてサブミットすると、カーソルは送信前に新しい行に移動し、UXをオフにします。どのように私はバニラJavascriptを使用して送信時に改行を無効にするための任意のアイデアですか？ご覧のように、私はreplace（）関数を追加しようとしましたが、無駄です。

マイテキストエリア：

postReply() { 
    this.$http.post('/api/chat/' + this.session.id + '/replies', { 
    body: this.body 
    }).then((response) => { 
     this.body.replace(/(\r\n|\n|\r)/gm,''); 
     this.body = ''; 
     this.replies.unshift(response.data); 
    }).catch((error) => { 

    }) 
}, 

Answer 1

使用@keydown.enter.prevent="postReply"：

<textarea id="btn-input" type="text" class="input-group_input" rows="4" 
    placeholder="Type your message here..." v-model="body" 
    @keydown.enter="postReply()"> 
</textarea> 

は、方法書を提出マイ。これにより、改行を作成しても、あなたのメソッドを呼び出すことになるenterキーのデフォルトの動作が妨げられます。