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键的默认操作，即创建换行符，但仍会调用您的方法。

在textarea预防新行

1 个答案: