javascript - Preventing new line in textarea - Stack Overflow

admin管理员组

文章数量:1287591

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.

My 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>

My submit method:

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

    })
},

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.

My 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>

My submit method:

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

    })
},

• javascript
• html
• vue.js

Share Improve this question Follow edited Jun 21, 2017 at 19:36 haMzox 2,10911 gold badge1515 silver badges2525 bronze badges asked Jun 21, 2017 at 15:40 Evan HickmanEvan Hickman 6911 silver badge88 bronze badges 1

• 1 so listen for enter key and prevent it. – epascarello Commented Jun 21, 2017 at 15:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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.

本文标签： javascriptPreventing new line in textareaStack Overflow