Add new line character to textarea instead of submitting form

Question

I have a form with a text area and hitting the enter key submits my form. How can I make it to add a new line character instead of a form submit.

no iam working with Spring mvc, but this is a simple html form. — Khizar, Dec 24 '12 at 10:51
i know shift+enter does that but a normal user does not usually know that, i want to disable it and add new line character by using js or jquery. — Khizar, Dec 24 '12 at 10:53
I dont know the answer, but looks like question is restricting submit action, upon enter button hit. — Naresh, Dec 24 '12 at 10:54
http://stackoverflow.com/questions/13560249/restrict-the-enter-key-press - See if that works Also http://stackoverflow.com/questions/1563062/prevent-form-submission-with-enter-key — Naresh, Dec 24 '12 at 10:55
***so you have text area and if you hit enter, form get submitted. IS this what you are trying to say??*** — Fahim Parkar, Dec 24 '12 at 11:02

score 32 · Accepted Answer · edited Jul 31 '18 at 14:57

32

$('textarea').keypress(function(event) {
   if (event.which == 13) {
      event.stopPropagation();
   }
});

JSFiddle Demo

edited Jul 31 '18 at 14:57

N.Jain

3
4

answered Dec 24 '12 at 10:55

Muhammad Talha Akbar

9,952
6
38
62

1

well i was thinking to answer it first but i had a confusion about `/n` or `\n` ;) – Muhammad Talha Akbar Dec 24 '12 at 10:57
2

This (the previous version) actually adds a new line to the end of the text – but what if you're typing in the middle of the text? I've edited this accordingly. — One issue is still unfixed about this though, as Jack Cood mentions: adding a new line in the last visible row means you have to adjust the scroll bar. — I'm just _super_ befuddled that this doesn't work out of the box. Such a bug! – WoodrowShigeru Nov 14 '15 at 18:00
Great solution that simply works! However, I would still recommend doing it the vanilla JS way, i.e. `element.addEventListener('keypress', event => ...)'` – ton Feb 27 '19 at 07:13

score 3 · Answer 2 · answered Jan 25 '17 at 20:45

Previous answers don't handle splitting the current value of the textarea and simply appends a new line character. The following stops the event from bubbling up to the form and still allows typical textarea behavior on 'enter'.

$('textarea').keydown(function(event) {
  if (event.keyCode === 13) {
    event.stopPropagation();
  }
});

score 2 · Answer 3 · answered Dec 24 '12 at 10:52

2

you can try this code:

$(document).ready(function() {
  $("textarea").keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

answered Dec 24 '12 at 10:52

Karthik Chintala

5,465
5
30
60

This disables it across the window, which may not be intended. You should scope it to the input box in question. – Ravi Y Dec 24 '12 at 10:53
This disables the enter key and no new line can be added to textarea. – Panu Haaramo Dec 06 '21 at 11:09

maček · Answer 4 · 2012-12-24T11:13:39.343

2

This should help

$('#myProblematicForm textarea').keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    this.value = this.value + "\n";
  }
});

For what it's worth, I'm using Chrome on OS X and Enter inserts a \n in a textarea for me and does not submit forms by default.

edited Dec 24 '12 at 11:13

answered Dec 24 '12 at 10:52

maček

76,434
37
167
198

ok well, i m also using Google Chrome But On Windows, It does not adds line break as default! – Muhammad Talha Akbar Dec 24 '12 at 11:07
@maček: your solution works, but I got a problem with Chrome. If textarea is scrollable, when I press enter key, the scrollbar doesn't work, I mean it doesn't scroll to new line. Any ideas for this problem? – Jack Cood Sep 22 '14 at 02:37
This adds a new line to textarea but form is still submitted. `return false` is needed. But with this solution I cannot add a new line anywhere else than in the end of the textarea. – Panu Haaramo Dec 06 '21 at 11:14

Abhinav Chauhan · Answer 5 · 2017-06-13T09:32:36.813

2

$(document).ready(function(){
$("#text").keypress(function(event) {   
   if (event.which == 13) { 
      var s = $(this).val();
      $(this).val(s+"\n");  //\t for tab
   }
});      
});

This can be done by jquery code that I have given above. Must notice that the use of ready function is necessary when you write above script before the codes of the HTML input field, and not necessary when you write it after the input field codes.If it not working try to use \t in place of \n it will work.

edited Jun 13 '17 at 09:32

answered Jun 10 '17 at 11:59

Abhinav Chauhan

31
2
8

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read this [how-to-answer](http://stackoverflow.com/help/how-to-answer) for providing quality answer. – thewaywewere Jun 10 '17 at 12:16
Thanks for the suggestions @thewaywewere , see my edited answer, hope it might help you. – Abhinav Chauhan Jun 13 '17 at 09:55

score 1 · Answer 6 · edited Apr 04 '14 at 09:19

1

$(document).ready(function() {
  $('textarea').keydown(function(event){
    if (event.keyCode == 13) {
      event.preventDefault();
      var s = $(this).val();
      $(this).val(s+"\n");
    }
  });
});

edited Apr 04 '14 at 09:19

Andy

61,948
13
68
95

answered Apr 04 '14 at 08:52

Rusty Fernandez

11
1

score 1 · Answer 7 · answered Feb 06 '17 at 15:21

1

This worked for me

$(document).keypress(function(e) {
if(e.which == 13) {
    if(document.activeElement.tagName != "TEXTAREA") {
        e.preventDefault();
    };
  }
})

answered Feb 06 '17 at 15:21

Alina Malchanava

11
1

Add new line character to textarea instead of submitting form

7 Answers7

Linked