I am looking to implement a feature in JavaScript (without jQuery) that will allow me to highlight selected text with control points or markers (left and right). These markers should function similar to those on mobile phones, allowing me to extend the selection by dragging them. Here is an example of what I'm trying to achieve:
In my current demo (http://jsfiddle.net/henrichro/HJ482/), I have managed to grab the selected text using the following code snippet:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
alert(text);
}
if (window.Event) document.captureEvents(Event.MOUSEUP);
document.onmouseup = getSelectionText;
Though this code retrieves the text successfully, I now aim to enhance it by adding markers around the selected text as described earlier.
Update 10/28/2013:
Following Dementic's guidance (see answer below), I have made progress and achieved a working version with markers using this new code: http://jsfiddle.net/henrichro/WFLU9/.
However, I am facing an issue when selecting more than one line of text, causing the markers to display incorrectly. Any suggestions on how to address this would be greatly appreciated.