Testing with TextArea

Testing events/formatting of <textarea> element

HTML

<div id="container">
    <textarea id="editor" class="monospace"></textarea>
    <div id="handle" class="handle"></div>
</div>

CSS

body, #container, #editor { margin: 0; border: 0; padding: 0; height: 100%; }

#container .monospace { margin: 10px; margin-bottom: 0; border: 1px solid #000; padding:3px; min-width: 200px; }
#container #editor { font: 13px/24px Monaco, Consolas, monospace; }
.handle{
  height: 8px;
  width: 100%;
  background: red;
  margin-top: -5px;
}

JavaScript

(function(w) {
    var d = w.document,
        c = w.console,

        /* cache common functions */
        slice = Array.prototype.slice,
        indexOf = Array.prototype.indexOf,


        log = function() {
            if (c) {
                c.log(slice.call(arguments));
            }
        },

        commands = [
            9 /* tab */
            ];

    /**
     * Required
     *  - Tab width
     *  - Command list
     *  - Line-processing
     *  - Markdown support
     */

    var editor = d.getElementById('editor'),
        lines = [];

    editor.settings = {};
    editor.settings.tw = 2;

    editor.addEventListener('keyup', function(e) {
        var key = e.keyCode === 0 ? e.which : e.keyCode,
            lines = this.value.split(/\n|^$/g),
            current = 0;

        if (indexOf.call(commands, key) > -1) {
            event.preventDefault();

            /* FAKE: run command */
            switch (key) {
            case 9:
                /* tab */
                this.value += this.settings.tw;
                break;
            }
        }

        log(lines, this);
    });
    
})(this);