Tab & Untab
Tabel Konten
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>
Dengan tombol Tab
dan
Shift+
Tabpada 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;
}
};
10 Komentar
Unknown
wah ini kang, saya pelajari dulu yah :) :-bd
#salam damai
budkalon
Wew, lagi-lagi hubungannya dengan elemen formulir :D
RizkyKR
kalau sudah tab lalu penghapusannya juga sebagai tab bagaimana mas taufik...?
penjelasan : penghapusannya seimbang dengan banyaknya spasi yang dibuat.
Taufik Nurrohman
Seperti biasa: Kurang paham dengan pertanyaanmu.
Beben Koben
mungkin begini, ketika membuat tab sebanyak 2x, terus menghapusnya langsung 2x langsung tanpa harus 2x langkah spt membuat tab (kale itu juga) :D
IRIL SAGITA
Wau, ternya bisa ya di manipulasi tab seperti di Office, ijin mempelajari dulu kak !
Alwan
Gunanya Untuk Apa :p
Unknown
itu kode javascriptnya buatan mas sendiri ya?, ini berfungsinya untuk apa ya?, mampir juga ke blogku ya Terselubung 8
Taufik Nurrohman
Tidak bisa dibilang begitu juga si. Ini hasil pengembangan dari plugin Zepto editor.js → https://github.com/anchorcms/anchor-cms/blob/master/anchor/views/assets/js/editor.js#L33&L99
Taufik Nurrohman
Ralat: Penyederhanaan (bukan pengembangan).