防止在textarea中换行

Question

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