在文本区域中防止换行 [英] Preventing new line in textarea

问题描述

我正在使用聊天功能(使用Vue)，并在输入中使用了文本区域，因此溢出包装起来了，对于编写较长消息的用户更易读.不幸的是，当用户按下Enter键并提交时，光标会在提交之前移至新行，使UX感觉良好.关于如何使用香草Javascript禁用换行符的任何想法?如您所见，我尝试添加了replace()函数，但无济于事.

I'm working on a chat feature (using Vue) and am using a textarea for my input so the overflow wraps and is more readable for users writing longer messages. Unfortunately, when the user keys down enter and submits, the cursor moves to a new line before submitting, making the UX feel off. Any ideas for how I could disable the newline on submit using vanilla Javascript? As you can see, I've tried adding a replace() function but to no avail.

我的文本区域:

<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) => {

    })
},

推荐答案

使用@keydown.enter.prevent="postReply".这将防止enter键的默认操作(该操作会创建换行符，但仍会调用您的方法).

Use @keydown.enter.prevent="postReply". This will prevent the default action of the enter key, which is to created a newline, but still call your method.

这篇关于在文本区域中防止换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！