We Keep Coding

Selecting range on focus quickly gets deselected in Safari

I have some javascript which works fine in Chrome/Firefox so that when a user focus's on a contentEditable div, the entire contents get highlighted. In Safari, however, I can see it get highlighted, then quickly the selection get's overridden to where the user clicks.
The following runs in onFocus:
const selection = window.getSelection(); // Shouldn't be undefined, but I guess could be?
if (selection) {
const range = document.createRange();
range.selectNodeContents(event.target);
selection.removeAllRanges();
selection.addRange(range);
}

Using javascript to select text and the containing element using createRange

I'm rolling my own generic wysiwyg editor but Im stuck selecting some text. I'm using a div with contenteditable set to true to enter the text into. The problem is I'm using a <var> tag to highlight some text that the user is supposed to delete and rewrite in their own words. When the text inside the <var> tag is clicked it highlights it as I expect but when you hit backspace it only deletes the text and not the tags (<var>). How can I tell the selection to grab a few more characters on each end of the selection so it also deletes the <var> tags? I'm using the following to make the selection happen.
var range = document.createRange();
range.selectNodeContents(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

Placed function on the div's click event.
Selected the <var> tag.
Used .selectNode rather than .selectNodeContents.
Browsers handle it differently though. Some will add <i></i> tags when you enter more text, others don't, but this does remove the <var> tag completely....
var myDiv = document.getElementById("myDiv");
var elem = document.getElementById("myVar");
myDiv.addEventListener("click", function() {
var range = document.createRange();
range.selectNode(elem);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
<div contenteditable="true" id="myDiv">
Hello, this<var id="myVar"> is a test</var> of the editor
</div>

Set window selection from a previously saved selection object

If I have a selection object from a textarea (with a class of my-text-area) using window.getSelection(), if this selection loses focus (say if the user clicks on another input field), is there a way I can set this selection again programmatically?
I've tried doing something like this:
When I have focus:
var currentSelection = window.getSelection();
After I lose focus and want to set the selection again:
var range = currentSelection.getRangeAt(0);
range.selectNode($('.my-text-area')[0]);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
This seems to select everything in my textarea though, not just the small selected area initially.

Just found the excellent Rangy library, that contains a Selection Save and Restore module that does exactly this: https://github.com/timdown/rangy/wiki/Selection-Save-Restore-Module

Range Object Mozilla Firefox startOffset not working correctly

I am building an Editor with the Range Object from Mozilla and Internet Explorer...
The thing is the following:
I have an Text in an div Box and now I select this text and get the start and offset with the Range Object -> with startOffset and endOffset.
In IE it works fine but in the Firefox I have the Problem, that repeated Text is not working correctly - it always takes only the first Text and is ignoring the other text range ...
So here my code:
function get_start() {
var markiert = window.getSelection().getRangeAt(0);
alert(markiert.startOffset);
}
function get_ende() {
var markiert = window.getSelection().getRangeAt(0);
alert(markiert.endOffset);
}
And it will display the start- and end-point of the selected string.

Detect selected text in a text area with javascript

Is it possible to detect what text has been selected in a text area using Javascript? I'm looking to show the user controls only when they have selected text

I've written a cross-browser function for getting the text selected in a textarea or text input and after some toing and froing the final version is I think the best one I've seen. I've posted it on Stack Overflow a few times before. Here's one example: Is there an Internet Explorer approved substitute for selectionStart and selectionEnd?
To detect when the user makes a selection in a textarea, you can use the select event:
var textarea = document.getElementById("some_id");
textarea.onselect = function() {
var selection = getInputSelection(textarea);
var selectedText = textarea.value.slice(selection.start, selection.end);
console.log("Selected text: " + selectedText);
};