Support TAB on Textarea

Support TAB Key on a html textarea ;)

by joaocolombo

HTML

<script src="https://raw.github.com/gist/2628879/fe26a28698fad49a49326010285c4793027d9166/javascript.min.js"></script>
<h1>Support TAB on textarea</h1>
<textarea cols="30" rows="10"></textarea></br>
<a href="https://gist.github.com/2628879">See the Gist</a>

CSS

body {
    margin: 1.5em;
}
h1 {
    font-size: 1.5em;
    color: #28b;    
}
textarea {
    font-size: 1em;
    resize: none;
}

JavaScript

var textarea = document.getElementsByTagName('textarea')[0]; 
    
    textarea.onkeydown = function(event) {
        
        //support tab on textarea
        if (event.keyCode == 9) { //tab was pressed
            var newCaretPosition;
            newCaretPosition = textarea.getCaretPosition() + "    ".length;
            textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + "    " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
            textarea.setCaretPosition(newCaretPosition);
            return false;
        }
        if(event.keyCode == 8){ //backspace
            if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
                var newCaretPosition;
                newCaretPosition = textarea.getCaretPosition() - 3;
                textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
                textarea.setCaretPosition(newCaretPosition);
            }
        }
        if(event.keyCode == 37){ //left arrow
            var newCaretPosition;
            if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
                newCaretPosition = textarea.getCaretPosition() - 3;
                textarea.setCaretPosition(newCaretPosition);
            }    
        }
        if(event.keyCode == 39){ //right arrow
            var newCaretPosition;
            if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == "    ") { //it's a tab space
                newCaretPosition = textarea.getCaretPosition() + 3;
                textarea.setCaretPosition(newCaretPosition);
            }
        } 
    }