防止在textarea中使用新行

Question

我正在使用一個聊天功能（使用Vue）併爲我的輸入使用textarea，因此溢出包裝並且對於編寫較長消息的用戶更具可讀性。不幸的是，當用戶按下輸入並提交時，光標在提交之前移動到一個新行，從而使UX感覺不到。任何想法如何禁用使用vanilla Javascript提交換行符？正如你所看到的，我嘗試添加一個replace（）函數，但無濟於事。

我的textarea：

<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鍵的默認操作，該鍵是創建換行符，但仍然調用您的方法。