防止文本区域中的新行

Question

我正在开发一个聊天功能（使用 Vue），并且我正在使用文本区域作为我的输入，因此溢出会包裹起来，并且对于编写较长消息的用户来说更具可读性。不幸的是，当用户按下回车键并提交时，光标会在提交前移动到新的一行，从而使 UX 感觉不对劲。关于如何使用 vanilla 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 键的默认操作，即创建换行符，但仍调用您的方法。