防止在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键的默认操作，该键是创建换行符，但仍然调用您的方法。