During the development of the new Coding Source Admin Section, the textarea needed the ability to use the TAB key for particular code examples.

Using the [Tab] key in a textarea on your webpage gives visitors and administrators more freedom than not having the feature available.
Doing a quick check through Google, I came across an Answer on stackoverflow.com«.
The code works well and can be modified to meet your needs.
In the [Source Code] below, you will see a great example of how to use this fantastic code on this site.

Adding an Event Listener to the keydown function of the textarea, removing its default purpose of use, and giving you the ability to tab through the textarea makes your HTML page work more like a word or text document editor than a typical HTML document.

[file.css]

CFFCS | CarrzSynEdit: | CSS (Cascading Style Sheets)

#Mytextarea{
    width:500px;
    height:10em;
}

[file.html]

CFFCS | CarrzSynEdit: | HTML (Hyper Text Markup Language)

<!-- Click in this area and hit your Spacebar to activate the Textarea on your Right.
     Next, click in the Textarea and hit your [Tab] key.
     Type something, hit your [Tab] key again, and type something else. -->
<textarea id="Mytextarea">
Hello,	test	this	out	here,	just	hit	the	tab	key	after	each	word.
</textarea>

[file.js]

CFFCS | CarrzSynEdit: | JS (JavaScript)

document.getElementById('Mytextarea').addEventListener('keydown', function(e) {
  if (e.key == 'Tab') {
    e.preventDefault();
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // set textarea value to: text before caret + tab + text after caret
    this.value = this.value.substring(0, start) +
      "\t" + this.value.substring(end);
    // put caret at the right position again
    this.selectionStart = this.selectionEnd = start + 1;
  }
});