Enable Tab Character Insertion Inside Textarea

by bizamajig

HTML

<h3>Press a Tab key inside the textarea! &dArr;</h3>
<textarea id="my-textarea"></textarea>
<input type="text"> <button>Example</button>

CSS

* {margin:0;padding:0}
body {padding:50px}
textarea {width:100%;height:150px;margin:10px 0}

JavaScript

function enableTab(id) {
    var el = document.getElementById(id);
    el.onkeydown = function(e) {
        if (e.keyCode === 9) { // tab was pressed

            // get caret position/selection
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;

            // set textarea value to: text before caret + tab + text after caret
            this.value = val.substring(0, start) + '\t' + val.substring(end);

            // put caret at right position again
            this.selectionStart = this.selectionEnd = start + 1;

            // prevent the focus lose
            return false;

        }
    };
}

// Enable the tab character onkeypress (onkeydown) inside textarea...
// ... for a textarea that has an `id="my-textarea"`
enableTab('my-textarea');