JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<textarea></textarea>
<button>Click</button>

<xmp>
</xmp>

CSS

textarea,
pre, xmp, code {
-webkit-tab-size : 2;
-moz-tab-size : 2;
-ms-tab-size : 2;
-o-tab-size : 2;
tab-size : 2;
}

JavaScript

$("textarea").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
            end = this.selectionEnd;

        var $this = $(this);

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

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

        // prevent the focus lose
        return false;
    }
});

$("button").click(function(){
	var getArea = $("textarea").val();
    $("xmp").html(getArea);
});