How to Handle Tab Key Presses in a Text Area with jQuery?

To handle tab key presses in a text area with jQuery, we can detect when the tab key is pressed in the text area.

Then if it’s pressed, we can call e.preventDefault on it to prevent the default behavior.

For instance, if we have the following text area:

<textarea></textarea>

Then we can listen to the keydown event to listen for tab key presses:

$("textarea").keydown((e) => {
  if (e.keyCode === 9) {
    const start = e.target.selectionStart;
    const end = e.target.selectionEnd;
    const $this = $(e.target);
    const value = $this.val();
    $this.val(`${value.substring(0, start)}\t${value.substring(end)}`);
    $this.selectionStart = $this.selectionEnd = start + 1;
    e.preventDefault();
  }
});

We get the text area with $(“textarea”) .

Then we call keydown to listen to the keydown event.

We pass in a callback to the keydown method.

In the callback, we check e.keyCode to check if it’s 9 to see if we pressed on tab or not.

If it’s true , then we pressed on tab.

In the if block, we get the start and end of the text selection with:

const start = e.target.selectionStart;
const end = e.target.selectionEnd;

Then assign the textarea element to $this with:

const $this = $(e.target);

We get the input value wit:

const value = $this.val();

And then we update the value of the text area by writing:

$this.val(`${value.substring(0, start)}t${value.substring(end)}`);

to insert a tab at the position where the selection is made.

Finally, we set the selection range with:

$this.selectionStart = $this.selectionEnd = start + 1;

to move the cursor to the end.

And finally, we call e.preventDefault to stop the default behavior, which is to move focus away from the text area.