How do I detect shift enter and generate a new line in Textarea

Question

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

User · Answer

This works for me       your textarea   on  keydown   function e       if e keyCode     13  amp  amp   e shiftKey                       form   submit

User · Answer

Using ReactJS ES6 here s the simplest way   shift   enter New Line at any position  enter Blocked  x000D   x000D  class App extends React Component   x000D   x000D   constructor    x000D      super    x000D      this state     x000D        message   Enter is blocked  x000D        x000D      x000D    onKeyPress    e    gt    x000D       if  e keyCode     13  amp  amp  e shiftKey    x000D          e preventDefault    x000D          let start   e target selectionStart  x000D              end   e target selectionEnd  x000D          this setState prevState   gt     message  x000D              prevState message substring 0  start  x000D                  n    x000D              prevState message substring end  x000D                 gt   x000D              this input selectionStart   this input selectionEnd   start   1  x000D             x000D       else if  e keyCode     13       block enter x000D        e preventDefault    x000D        x000D       x000D       x000D   x000D    render    x000D      return  x000D         lt div gt  x000D        New line with shift enter at any position lt br   gt  x000D          lt textarea  x000D         value  this state message  x000D         ref   input   gt  this input   input  x000D         onChange   e   gt this setState   message  e target value     x000D         onKeyDown  this onKeyPress   gt  x000D         lt  div gt  x000D        x000D      x000D    x000D   x000D  ReactDOM render  lt App   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is an AngularJS solution using ng-keyup if anyone has the same issue using AngularJS   ng-keyup   event keyCode    13  amp  amp    event shiftKey  amp  amp  myFunc

User · Answer

I found this thread looking for a way to control Shift   any key   I pasted together other solutions to make this combined function to accomplish what I needed   I hope it helps someone else     function          return this each function            this  keydown function  e            var key   e charCode    e keyCode    0             Shift   anything is not desired         if  e shiftKey                return false                       allow backspace  tab  delete  enter  arrows  numbers            and keypad numbers ONLY            home  end  period  and numpad decimal         return               key    8                key    9                key    13                key    46                key    110                key    190                 key  gt   35  amp  amp  key  lt   40                  key  gt   48  amp  amp  key  lt   57                  key  gt   96  amp  amp  key  lt   105

User · Answer

Another Solution for detecting Shift Enter Key with Angular2  Inside Component html  lt input type  quot text quot   keydown shift enter   quot newLine  event  quot  gt  Inside Component ts newLine event         if event keyCode  13  amp  amp  event shiftKey           alert  Shift Enter key Pressed

User · Answer

Better use simpler solution   Tim s solution below is better I suggest using that  https   stackoverflow com a 6015906 4031815    My solution  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  How to get the caret column  not pixels  position in a textarea  in characters  from the start   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       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                     if event shiftKey               this value   content substring 0  caret - 1      n    content substring caret  content length               event stopPropagation              else               this value   content substring 0  caret - 1    content substring caret  content length                  form   submit                          Here is a demo

User · Answer

I use div by adding contenteditable true instead of using textarea   Hope can help you       your textarea   on  keydown   function e    textarea keydown events   if e key     Enter           if e shiftKey   jump new line               do nothing           else     do sth like send message or else              e preventDefault     cancell the deafult events

User · Answer

Most of these answers overcomplicate this   Why not try it this way      textarea   keypress function event            if  event keyCode    13  amp  amp   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

User · Answer

In case someone is still wondering how to do this without jQuery   HTML   lt textarea id  description  gt  lt  textarea gt   Javascript  const textarea   document getElementById  description     textarea addEventListener  keypress    e    gt        e keyCode     13  amp  amp   e shiftKey  amp  amp  e preventDefault          Vanilla JS  var textarea   document getElementById  description     textarea addEventListener  keypress   function e        if e keyCode     13  amp  amp   e shiftKey          e preventDefault

User · Answer

Easy  amp  Elegant solution  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        form submit           and you could just change it to if  evt keyCode    13  amp  amp   evt shiftKey        form submit        On the other hand  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  jsFiddle  http   jsfiddle net zd3gA 1  Code  function pasteIntoInput el  text        el focus        if  typeof el selectionStart     quot number quot               amp  amp  typeof el selectionEnd     quot number quot             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     quot undefined quot             var textRange   document selection createRange            textRange text   text          textRange collapse false           textRange select             function handleEnter evt        if  evt keyCode    13  amp  amp  evt shiftKey            if  evt type     quot keypress quot                 pasteIntoInput this   quot  n quot                      evt preventDefault                Handle both keydown and keypress for Opera  which only allows default    key action to be suppressed in keypress    quot  your textarea id quot   keydown handleEnter  keypress handleEnter

User · Answer

using ng-keyup directive in angularJS  only send a message on pressing Enter key and Shift Enter will just take a new line   ng-keyup    event keyCode    13 amp  amp   event shiftKey    sendMessage     null

User · Answer

Why not just      commentArea   keypress function e        var textVal     this  val        if e which    13  amp  amp  e shiftKey               else if  e which    13           e preventDefault      Stops enter from creating a new line        this form submit      or ajax submit

User · Answer

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

[javascript] How do I detect "shift+enter" and generate a new line in Textarea?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css