在文本區域中防止換行

Question

我正在使用聊天功能（使用Vue），並且正在使用textarea進行輸入，因此溢出包裝起來了，對於編寫較長消息的用戶更易讀。 不幸的是，當用戶按下Enter鍵並提交時，光標會在提交之前移至新行，使UX感覺良好。 關於如何使用香草Javascript禁用換行符的任何想法？ 如您所見，我嘗試添加了replace（）函數，但無濟於事。

我的文字區域：

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

我的提交方法：

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" 。 這將阻止enter鍵的默認操作，該操作將創建換行符，但仍會調用您的方法。