We Keep Coding

How to get pixel-position of window.selection

I have been able to get the selection from the red box with this code:
var selection = window.getSelection().getRangeAt(0);
Which returns a startOffset and a endOffset corresponding to the characters from 0-14 (in this picture)
But how do you get the same kind of area-selection of a image? The desired output should be like the example below

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);
}

Get bounding rectangle of selected text javascript

I use this code How can I position an element next to user text selection? to get the position of the selected text, but it doesn't work for the selected text inside an input. Sometimes the position is 0.
Is there some universal method for detecting the position of the selected text?
I want to show a tooltip on mouseup or dblclick the selected text.

You can use the following code to get the position of selected text:
var selection = window.getSelection();
var getRange = selection.getRangeAt(0);
getRect = getRange.getBoundingClientRect();

You can use getSelection api.
After selection a text run below code in console.
var selection = window.getSelection()
var baseOffset = selection.baseOffset
var length = selection.focusOffset -selection.baseOffset
var text = selection.focusNode.data.splice(baseOffset, length)

If you just need to get the position where the user doubleclicked, use the following snippet.
$('#thatInput').on('dblclick', function (e) {
alert('Position X: ' + e.clientX + '\nPosition Y: ' + e.clientY);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thatInput">

The question is about getting the position of mouse pointer when selecting text. I am trying a solution that also works with keyboard events (choosed keyup).
I wrote a sample html page with a "vanilla" script inside to test the capabilities of the Selection API. This is the idea:
When selecting on text nodes, getting the position of selected text is done by means of the Range Object.
But when the selected text is a part of an Input Element, using the getBoundingClientRect() of the Range Object does not work (gave me a full zero ClientRect Object.
So, the function getSel() will try to consider both scenarios: selecting text just from the HTML or inside some input elements (just considered input and textarea).
On the bottom of the page there is a div#results element, for displaying data, then getSel() will create a new div#boundy with the coordinates of the ClientRect object or the related input element coordinates.
I wish to finish it, but I'm out of ideas on how to get the actual position of the selected text inside the input objects. It will have to be adding in a relative way to the coordinates of the element itself.
Answering Andrew, if this works, you'll be able to use the coordinates of div#boundy to place the tooltip wherever you want.
I've created a codepen here.

using jquery to operate sth on selected input parts

My goal is to change the font-format of the selected part of the input text using jQuery.
plz show me the way that works in firefox(if there isn't a way for it doesn't matter...). my problem is getting the selected part (ranges) and working with that ranges but i am not sure if its this way.plz show me the way.
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
} else if (document.selection) { // Opera
userSelection = document.selection.createRange();
}
i am designing a full text editor using html.

How to preserve selection when changing contents of an HTML element

I would like to be able to preserve the users' selection when I change the contents of an HTML element. If the element is updated while the beginning or end of the selection happens to be inside, the entire selection is lost. This also happens while dragging to create a selection, so that if the user is dragging a selection and the element's inner HTML is updated while the cursor is over the element, the user must start over.
I have a <span> that contains a time in the format 'hh:mm:ss am' and is updated each second. The length of the text never changes, so that isn't an issue.
I have tried the following:
var s = window.getSelection();
if (!s.isCollapsed) {
var range = document.createRange();
range.setStart(s.anchorNode,s.anchorOffset);
range.setEnd(s.focusNode,s.focusOffset);
}
document.getElementById('time').innerHTML = new Date().toString();
if (typeof range != 'undefined') { s.removeAllRanges(); s.addRange(range); }
It's the best my research has yielded, but it doesn't seem to make a difference.
What should I do to prevent the selection from vanishing if it happens to start or end in this span?

You need to set the selection again: range.selectNodeContents(newNode);
newNode = document.getElementById("[span id]");