How to Detect When the User Presses the Shift+Enter and Key Combo and Add a New Line in Text Area When the User Does So?

Sometimes, we want to detect when the user presses the shift-enter key combo and adds a new line in the text area when the user does so.

In this article, we’ll look at how to detect the shift-enter key combo when it’s pressed when the cursor is in the text area.

Add the Text Selection in the Text Area to Move the Cursor

We can move the cursor in the text area to the next line by adding a selection range into the text area.

For instance, if we have the following text area:

<textarea></textarea>

Then we can listen to the keydown event to detect the shift+enter key combo press.

If the combo is pressed, then we stop the default behavior and then add the text selection to the text area to move the cursor to the next line.

To do this, we write:

const pasteIntoInput = (el, text) => {
  el.focus();
  if (typeof el.selectionStart === "number" &&
    typeof el.selectionEnd === "number") {
    const val = el.value;
    const 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") {
    const textRange = document.selection.createRange();
    textRange.text = text;
    textRange.collapse(false);
    textRange.select();
  }
}

const handleEnter = (evt) => {
  if (evt.keyCode === 13 && evt.shiftKey) {
    if (evt.type === "keypress") {
      evt.preventDefault();
      pasteIntoInput(evt.target, "\n");
    }
  }
}

const textarea = document.querySelector('textarea')
textarea.addEventListener('keydown', handleEnter)

We have the pasteIntoInput function that takes the el element and the text value.

In the function, we call el.focus to focus on the element.

Then we check if selectionStart and selectionEnd if a number.

Then we set the el.value to the combination of the selection of the first part of the text, the concatenate that with the text and the concatenate that with the second part of the selected text.

Then we set el.selectionEnd to the new length of the text.

If documebt.selection is undefined ,

Then we create a new selection with documenbt.selection.createRange .

And then we set the selected text, all collapse to collapse the selection and call select to select it.

Next, we create the handleEnter function which is the event handler.

We detect the shift+enter key combo and stop the default behavior and call pasteIntoInput to paste a new line into the text area if the key combo is pressed.

And finally, we select the text area with querySelector .

And then we call addEventListener to listen for the keydown event on the texta area.

Now when we press shift+enter, the cursor will move to a new line.

Conclusion

We can insert a new line into the text area when shift+enter is pressed by stopping the default behavior and then add a new line character to the selected text and set that as the new value of the text area to add the new line.