Organizational Research By

Surprising Reserch Topic

how do i detect shiftenter and generate a new line in textarea

how do i detect shiftenter and generate a new line in textarea  using -'javascript,jquery,html,css'

Currently, if the person presses enter inside the text area, the form will submit.
Good, I want that.

But when they type shift + enter, I want the textarea to move to the next line: \n

How can I do that in JQuery or plain JavaScript as simple as possible?

asked Oct 6, 2015 by yogeshplv
0 votes

Related Hot Questions

5 Answers

0 votes

I think you can do something like this..

EDIT : Changed the code to work irrespective of the caret postion

First part of the code is to get the caret position.

Ref: Caret position in textarea, in characters from the start

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 
        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0;
        var re = el.createTextRange(), rc = re.duplicate();
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    return 0; 

And then replacing the textarea value accordingly when Shift + Enter together , submit the form if Enter is pressed alone.

$('textarea').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;  
        var caret = getCaret(this);          
            this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);

Here is a demo

answered Oct 6, 2015 by nimisha.jagtap
0 votes

First, pressing Enter inside a textarea does not submit the form unless you have script to make it do that. That's the behaviour the user expects and I'd recommend against changing it. However, if you must do this, the easiest approach would be to find the script that is making Enter submit the form and change it. The code will have something like

if (evt.keyCode == 13) {

... and you could just change it to

if (evt.keyCode == 13 && !evt.shiftKey) {

If you don't have access to this code for some reason, you need to do the following to make it work in all major browsers even if the caret is not at the end of the text:



function pasteIntoInput(el, text) {
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        var val = el.value;
        var selStart = el.selectionStart;
        el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
        el.selectionEnd = el.selectionStart = selStart + text.length;
    } else if (typeof document.selection != "undefined") {
        var textRange = document.selection.createRange();
        textRange.text = text;

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");

// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
answered Oct 6, 2015 by kinnari
0 votes

Why not just

$(".commentArea").keypress(function(e) {
    var textVal = $(this).val();
    if(e.which == 13 && e.shiftKey) {

    else if (e.which == 13) {
       e.preventDefault(); //Stops enter from creating a new line
       this.form.submit(); //or ajax submit
answered Oct 6, 2015 by sameer rathore
0 votes

Most of these answers overcomplicate this. Why not try it this way?

$("textarea").keypress(function(event) {
        if (event.keyCode == 13 && !event.shiftKey) {
         submitForm(); //Submit your form here
         return false;

No messing around with caret position or shoving line breaks into JS. Basically, the function will not run if the shift key is being pressed, therefore allowing the enter/return key to perform its normal function.

answered Oct 6, 2015 by loknath.ganji
0 votes

Use the jQuery hotkeys plugin and this code

jQuery(document).bind('keydown', 'shift+enter', 
         function (evt){ 
             $('textarea').val($('#textarea').val() + "\n");// use the right id here
             return true;
answered Oct 6, 2015 by badhwar.rohit