- Mendapatkan Teks yang Terseleksi
- Seleksi Teks Otomatis
- Konversi Node Terseleksi ke HTML
- Manipulasi Posisi dan Jarak Seleksi
- Memposisikan Caret ke Bagian Akhir Area Teks
- Memposisikan Caret ke Bagian Akhir Area Teks
- Menyimpan dan Mengembalikan Teks Terseleksi
- Mendapatkan Jarak Awal dan Akhir Teks Terseleksi pada Area Teks
- Menyisipkan Sesuatu Setelah Caret
- Menyisipkan Sesuatu Sebelum dan Setelah Teks Terseleksi
- Mendapatkan Elemen Induk dari Teks yang Terseleksi
- Referensi Lainnya
Mendapatkan Teks yang Terseleksi
Paling dasar. Fungsi ini dipakai untuk mengambil teks yang terseleksi. Hanya teks. Tag HTML tidak akan direpresentasikan sebagai node apa adanya. Untuk mengubah node terseleksi menjadi HTML, gunakan fungsi ini:
function getSelectionText() { var sel = ""; if (window.getSelection) { sel = window.getSelection(); } else if (document.getSelection) { sel = document.getSelection(); } else if (document.selection) { // IE sel = document.selection.createRange().text; } return sel; }Contoh Penggunaan
document.onmouseup = function() { alert(getSelectionText()); };Seleksi Teks Otomatis
function autoSelect(elem) { var sel, range; if (window.getSelection) { sel = window.getSelection(); range = document.createRange(); range.selectNodeContents(elem); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection) { // IE sel = document.selection.createRange().text; range = document.body.createTextRange(); range.moveToElementText(elem); range.select(); } }Konversi Node Terseleksi ke HTML
Fungsinya yakni untuk membawa bagian-bagian yang terseleksi menjadi HTML dalam bentuk string, sehingga hasil yang didapatkan sanggup ditempelkan ke area tertentu sebagai duplikat yang sama dengan bab yang terseleksi:
// http://stackoverflow.com/a/4652824 function getSelectionHTML() { var html = ""; if (typeof window.getSelection != 'undefined') { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement('div'); // Just a placeholder for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != 'undefined') { if (document.selection.type == 'Text') { html = document.selection.createRange().htmlText; } } return html; }Contoh Penggunaan
Sisipkan bab yang terseleksi ke dalam area #result-container sebagai HTML:
document.getElementById('action-btn').onclick = function() { document.getElementById('result-container').innerHTML = getSelectionHTML(); };Manipulasi Posisi dan Jarak Seleksi
Fungsi ini dipakai untuk menciptakan jarak seleksi pada posisi yang telah ditentukan. Cuma berlaku untuk elemen formulir. Menentukan nilai yang sama pada parameter selectionStart dan selectionEnd memungkinkan fungsi ini untuk dipakai sebagai pengatur letak caret teks:
// http://stackoverflow.com/a/499158 function setSelectionRange(input, selectionStart, selectionEnd) { if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } else if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } }Contoh Penggunaan
document.getElementById('action-btn').onclick = function() { setSelectionRange(document.getElementById('target-textarea'), 10, 100); };Memposisikan Caret ke Bagian Akhir Area Teks
// http://stackoverflow.com/a/4716021 function moveCaretToEnd(el) { if (typeof el.selectionStart == 'number') { el.selectionStart = el.selectionEnd = el.value.length; } else if (typeof el.createTextRange != 'undefined') { el.focus(); var range = el.createTextRange(); range.collapse(false); range.select(); } }Contoh Penggunaan
<textarea onfocus="moveCaretToEnd(this);"> ... </textarea>Menyimpan dan Mengembalikan Teks Terseleksi
Fungsi pertama dipakai untuk mendapat teks terseleksi biar sanggup Anda simpan ke dalam variabel. Fungsi ke dua dipakai untuk mengembalikan node terseleksi yang telah Anda simpan tadi:
// http://stackoverflow.com/a/2925633 var savedSelection = null; // Variable to save the selected node function saveSelection() { if (window.getSelection) { var sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } return null; } function restoreSelection(range) { if (range) { if (window.getSelection) { var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection && range.select) { range.select(); } } }Penggunaan
document.getElementById('save-selection-btn').onclick = function() { savedSelection = saveSelection(); }; document.getElementById('restore-selection-btn').onclick = function() { restoreSelection(savedSelection); };Mendapatkan Jarak Awal dan Akhir Teks Terseleksi pada Area Teks
function getInputSelection(el) { // http://stackoverflow.com/a/3053640 var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working text range that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since `moveStart`/`moveEnd` doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; }Penggunaan
document.getElementById('test-btn').onmousedown = function() { var position = getInputSelection(document.getElementById('test-textarea')); alert('Start: ' + position.start + ', End: ' + position.end); };Menyisipkan Sesuatu Setelah Caret
1. <div contenteditable>
Fungsi yang sanggup bekerja pada elemen HTML dengan atribut contenteditable:
// http://stackoverflow.com/a/6691294 function pasteHtmlAtCaret(html) { var sel, range, el, frag, node, lastNode; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // `Range.createContextualFragment()` would be useful here but is // non-standard and not supported in all browsers (IE9, for one) el = document.createElement('div'); el.innerHTML = html; frag = document.createDocumentFragment(); while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != 'Control') { // IE < 9 document.selection.createRange().pasteHTML(html); } }Contoh Penggunaan
Sisipkan emoticon sehabis kursor caret:
document.getElementById('insert-btn').onclick = function() { pasteHtmlAtCaret('<img src="emoticon.gif" width="16" height="16">'); };2. <textarea>
Fungsi yang sanggup bekerja pada elemen formulir teks ibarat <textarea>:
// http://stackoverflow.com/a/11070952 function insertStringAtCaret(str, elem) { var value = elem.value, before = value.substring(0, elem.selectionStart), after = value.substring(elem.selectionEnd, value.length), pos = before.length + str.length; elem.value = before + str + after; setSelectionRange(elem, pos, pos); } function setSelectionRange(input, selectionStart, selectionEnd) {#code-snippet:manipulasi-posisi-dan-jarak-seleksi}Contoh Penggunaan
<button onmousedown="insertStringAtCaret(' :D ', document.getElementById('target-textarea'));">:D</button>Menyisipkan Sesuatu Sebelum dan Setelah Teks Terseleksi
Pada umumnya dipakai untuk menyisipkan tag HTML sebelum teks terseleksi dan sehabis teks terseleksi. Fungsi ini Saya buat menurut fungsi di atas:
// Mendukung untuk semua peramban mayor dan IE8+ function wrapText(str1, str2, elem) { var value = elem.value, before = value.substring(0, elem.selectionStart), selected = value.substring(elem.selectionStart, elem.selectionEnd), after = value.substring(elem.selectionEnd, value.length), endpos = before.length + str1.length + selected.length + str2.length; elem.value = before + str1 + selected + str2 + after; setSelectionRange(elem, before.length, endpos); } function setSelectionRange(input, selectionStart, selectionEnd) {#code-snippet:manipulasi-posisi-dan-jarak-seleksi}Contoh Penggunaan
<button onclick="wrapText('<b>', '</b>', document.getElementById('target-textarea'));">Bold</button>Mendapatkan Elemen Induk dari Teks yang Terseleksi
// http://stackoverflow.com/a/1336922 // The following will return the container element of the start or end boundary of the current selection // `getSelectionBoundaryElement()` will select the last container element of the current multiple container selection. // `getSelectionBoundaryElement(true)` will select the first container element of the current multiple container selection. function getSelectionBoundaryElement(isStart) { var range, sel, container; if (document.selection) { range = document.selection.createRange(); range.collapse(isStart); return range.parentElement(); } else { sel = window.getSelection(); if (sel.getRangeAt) { if (sel.rangeCount > 0) { range = sel.getRangeAt(0); } } else { // Old WebKit range = document.createRange(); range.setStart(sel.anchorNode, sel.anchorOffset); range.setEnd(sel.focusNode, sel.focusOffset); // Handle the case when the selection was selected backwards (from the end to the start in the document) if (range.collapsed !== sel.isCollapsed) { range.setStart(sel.focusNode, sel.focusOffset); range.setEnd(sel.anchorNode, sel.anchorOffset); } } if (range) { container = range[isStart ? "startContainer" : "endContainer"]; // Check if the container is a text node and return its parent if so return container.nodeType === 3 ? container.parentNode : container; } } }Contoh Penggunaan
function getSelectionText() {#code-snippet:mendapatkan-teks-yang-terseleksi} document.onmouseup = function() { if (getSelectionText().toString() !== "") { var parentElem = getSelectionBoundaryElement(); parentElem.style.backgroundColor = "#ff0"; } };