Allow tab spaces in textarea

Here we explain how to allow insertion of tab spaces in a textarea

For this we have to get the current position of the cursor first

var start = this.selectionStart;
var end = this.selectionEnd;

 

Now we need to get the text before and after the pointer and concatenate them with the tab character in between them

var $this = $(this);

$this.val($this.val().substring(0, start) + "\t" + $this.val().substring(end));

 

Then we will move the pointer to the right side of tab character

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

 

and return false so that the focus is not moved away from the textarea

return false;

 

Finally we need to enclose everything inside keydown check function and check whether the tab key is pressed

$("textarea").keydown(function(e) {
    if(e.keyCode === 9) {

    var start = this.selectionStart;
    var end = this.selectionEnd;

    var $this = $(this);

    $this.val($this.val().substring(0, start) + "\t" + $this.val().substring(end));

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

    return false;

    }
});