Tab &amp; Untab

Fungsi ini memungkinkan Anda untuk melakukan perintah indentasi atau outdentasi pada lebih dari satu baris teks sekaligus di dalam elemen <textarea>:

(function() {

    var tabCharacter = '    '; // Use `\t` or multiple space character

    var select = function(start, end, target) {
        target.focus();
        target.setSelectionRange(start, end);
    };

    window._tab = function(target) {

        var start = target.selectionStart,
            end = target.selectionEnd,
            value = target.value,
            selections = value.substring(start, end).split('\n');

        for (var i = 0, len = selections.length; i < len; ++i) {
            selections[i] = tabCharacter + selections[i];
        }

        target.value = value.substring(0, start) + selections.join('\n') + value.substring(end);

        // re-select text after tabbing
        var selectEnd = (end + (tabCharacter.length * selections.length));
        if (start == end) {
            select(selectEnd, selectEnd, target);
        } else {
            select(start, selectEnd, target);
        }

    };

    window._untab = function(target) {

        var start = target.selectionStart,
            end = target.selectionEnd,
            value = target.value,
            pattern = new RegExp("^" + tabCharacter),
            edits = 0;

        if (start == end) { // single line

            while (start > 0) {
                if(value.charAt(start) == '\n') {
                    start++;
                    break;
                }
                start--;
            }

            var portion = value.substring(start, end),
                matches = portion.match(pattern);

            if (matches) {
                target.value = value.substring(0, start) + portion.replace(pattern, "") + value.substring(end);
                end--;
            }

            // set caret position after tabbing
            var selectEnd = end <= start ? end : end - tabCharacter.length + 1;
            select(selectEnd, selectEnd, target);

        } else { // multiline

            var selections = value.substring(start, end).split('\n');

            for (var i = 0, len = selections.length; i < len; ++i) {
                if (selections[i].match(pattern)) {
                    edits++;
                    selections[i] = selections[i].replace(pattern, "");
                }
            }

            target.value = value.substring(0, start) + selections.join('\n') + value.substring(end);

            // re-select text after tabbing
            select(start, (edits > 0 ? end - (tabCharacter.length * edits) : end), target);

        }

    };

})();

Penggunaan

Dengan tombol:

<button onclick="_tab(document.getElementById('ID-TEXTAREA'));">Tab</button>
<button onclick="_untab(document.getElementById('ID-TEXTAREA'));">Untab</button>

Lihat Demo

Dengan tombol Tab

dan

Shift

Tab

pada papan kunci:

document.getElementById('ID-TEXTAREA').onkeydown = function(e) {
    // Shift + Tab ditekan
    if (e.shiftKey && e.keyCode == 9) {
        _untab(this);
        return false;
    }
    // Tab ditekan
    if (e.keyCode == 9) {
        _tab(this);
        return false;
    }
};

Lihat Demo

Terkait: Daftar Snippet untuk Implementasi DOM Range API