Textarea Shift+Enter for next line and Enter to submit the form

Question

In textarea when the user presses Shift+Enter then it should continue in next new line and when he simply presses Enter it should submit the form without using submit button.

Here is the Fiddle!!

I have browsed a lot but doesn't helped me, detailed explanation appreciated Please help me!!

Code

$('commenttextarea').keyup(function (event) {
   if (  event.shiftKey && event.keyCode == 13) {
       var content = this.value;
       var caret = getCaret(this);
       this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1);
       event.stopPropagation();

  }else if(event.keyCode == 13)
  {
      $('commentform').submit();
  }});

Possible dublicate [of this](http://stackoverflow.com/questions/6014702/how-do-i-detect-shiftenter-and-generate-a-new-line-in-textarea) — Oli, Dec 23 '13 at 11:17

Rohan Kumar · Accepted Answer · 2013-12-23T11:32:35.037

4

First, You missed to load any jquery version

Second, you missed # before textarea and form selectors.

Also use caret not carent in line

this.value = content.substring(0,caret)+"\n"+content.substring(caret,content.length-1);
                          // ----------------------------------^

Full Code

function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}
$('#commenttextarea').keyup(function (event) {
    if (event.shiftKey && event.keyCode == 13) {
        var content = this.value;
        var caret = getCaret(this);
        this.value = content.substring(0, caret) + "\n" + content.substring(caret, content.length - 1);
        event.stopPropagation();
    } else if (event.keyCode == 13) {
        $('#commentform').submit();
    }
});

See this would work

edited Dec 23 '13 at 11:32

answered Dec 23 '13 at 11:23

Rohan Kumar

40,431
11
76
106

Rohan kumar! Does fiddle require jquery version?? and i il try with your second suggestion. – stacky Dec 23 '13 at 11:27
Yes, **Fiddle** doesn't add any `library` or `framework` by itself. – Rohan Kumar Dec 23 '13 at 11:30
@Fastnto if you want to use jQuery within a jsFiddle, then you need to select a Version of jQuery on the left side of jsFiddle in the drop-down saying `No-Library (pure JS)`. – Ignitor Dec 23 '13 at 11:31
@RohanKumar **Shift+Enter** isn't working with **[This](http://jsfiddle.net/eUaLt/1/)** – stacky Dec 23 '13 at 11:45
@RohanKumar hey sorry, both the operations are working in fiddle. But **Enter** to submit the form is not working in FF, Safari and IE. Instead both the operations are working as **Shift+Enter** – stacky Dec 23 '13 at 11:59
@Fastnto If you provide `action` in `form tag` then it will `submit` like, `
` see [this](http://jsfiddle.net/eUaLt/2/)
– Rohan Kumar Dec 23 '13 at 12:03

score 0 · Answer 2 · edited May 23 '17 at 12:19

As Rohan Kumar said: you forgot the id Selectors:

$('#commenttextarea').keyup(function (event) {
   if (  event.shiftKey && event.keyCode == 13) {
       var content = this.value;
       var caret = getCaret(this);
       this.value = content.substring(0,caret)+"\n"+content.substring(carent,content.length-1);
       event.stopPropagation();

  }else if(event.keyCode == 13)
  {
      $('#commentform').submit();
  }});

Textarea Shift+Enter for next line and Enter to submit the form

2 Answers2