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.

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.

• javascript

• If it's on mouseup/dblclick, can't you just use the position of the click event? Should just be event.pageX and event.pageY – jmcgriz Commented May 7, 2018 at 21:08
• Can you please provide a fiddle of your current code? – Giacomo Penuti Commented May 8, 2018 at 1:53

4 Answers 4

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.