Get bounding rectangle of selected text javascript

Question

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.

Answer 1

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

Answer 2

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)

Answer 3

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">