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
– Khizar, Commented Dec 24, 2012 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
– Khizar, Commented Dec 24, 2012 at 10:53
I dont know the answer, but looks like question is restricting submit action, upon enter button hit. — Naresh
– Naresh, Commented Dec 24, 2012 at 10:54

N.Jain · Accepted Answer · 2018-07-31 14:57:54Z

32

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

JSFiddle Demo

edited Jul 31, 2018 at 14:57

N.Jain

34 bronze badges

answered Dec 24, 2012 at 10:55

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Talha Akbar Over a year ago

well i was thinking to answer it first but i had a confusion about /n or \n ;)

WoodrowShigeru Over a year ago

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!

ton Over a year ago

Great solution that simply works! However, I would still recommend doing it the vanilla JS way, i.e. element.addEventListener('keypress', event => ...)'

David Rice · Accepted Answer · 2017-01-25 20:45:05Z

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(); } });

Karthik Chintala · Accepted Answer · 2012-12-24 10:52:18Z

2

you can try this code:

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

answered Dec 24, 2012 at 10:52

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

2 Comments

Ravi Y Over a year ago

This disables it across the window, which may not be intended. You should scope it to the input box in question.

Panu Haaramo Over a year ago

This disables the enter key and no new line can be added to textarea.

maček · Accepted Answer · 2012-12-24 11:13:39Z

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, 2012 at 11:13

answered Dec 24, 2012 at 10:52

maček

78k37 gold badges172 silver badges200 bronze badges

3 Comments

Talha Akbar Over a year ago

ok well, i m also using Google Chrome But On Windows, It does not adds line break as default!

Jack Cood Over a year ago

@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?

Panu Haaramo Over a year ago

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.

Alina Malchanava · Accepted Answer · 2017-02-06 15:21:46Z

This worked for me

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

Abhinav Chauhan · Accepted Answer · 2017-06-13 09:32:36Z

$(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.

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 for providing quality answer.
Thanks for the suggestions @thewaywewere , see my edited answer, hope it might help you.

Andy · Accepted Answer · 2014-04-04 09:19:31Z

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

Collectives™ on Stack Overflow

Add new line character to textarea instead of submitting form

7 Answers 7

3 Comments

Comments

2 Comments

3 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

2 Comments

3 Comments

Comments

2 Comments

Comments

Linked

Related