Get bounding rectangle of selected text javascript

getboundingclientrect alternative
get position of selected text javascript
getboundingclientrect returns 0
javascript get selected text
getboundingclientrect react
jquery getboundingclientrect
text selection in javascript
js get selection coordinates

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

Range.getBoundingClientRect(), This method is useful for determining the viewport coordinates of the cursor or selection inside a text box. See Element.getBoundingClientRect()  The much larger bounding box including the image is the right answer. Okay, so much for the layout theory explaining why this happens as it does. Now how to get it to do what you want it to do, and exclude the contained image from the selection bounding box?

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)

Element.getBoundingClientRect(), scrollY ) to get a bounding rectangle which is independent from the current scrolling position. Cross-browser fallback. Scripts requiring high cross-  Note: The amount of scrolling that has been done of the viewport area is taken into account when computing the bounding rectangle. This means that the rectangle's edges (top, left, bottom, and right) change their values every time the scrolling position changes.

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

Outlining Text Selections Using The Window Selection API, And, uses it to draw outlines of the text that is currently selected by the User. So​, in order to get back to a good place, I need to just keep the machinery firing and Run this demo in my JavaScript Demos project on GitHub. getClientRects() - Returns the bounding box for each element in the selection. thats what i use exactly. However i want to get the bounding box of a selected element. An element that has been selected on the canvas. I select the element then click a button that fires a function that gets its bounding box. I dont know what to substitute in the place of "svgNode" to get the value of a Selected element.

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.

Coordinates, As you can see, x/y and width/height fully describe the rectangle. that allows for “directed” rectangle, e.g. to represent mouse selection get document coordinates of the element function getCoords ( elem ) { let box = elem . If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.

HTML DOM getBoundingClientRect() Method, the bounding rectangle. This means that the rectangle's edges (top, left, bottom​, and right) change their values every time the scrolling position changes. The Range.getBoundingClientRect() method returns a DOMRect object that bounds the contents of the range; this is a rectangle enclosing the union of the bounding rectangles for all the elements in the range. This method is useful for determining the viewport coordinates of the cursor or selection inside a text box.

Item Location on a Document Page, and return the location and geometry for lines and words, while and return the location and geometry of key-value pairs, tables, cells, and selection elements. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

getBoundingClientRect method (Internet Explorer), <head> <script type="text/javascript"> var rcts; var keyCount = 0; createTextRange(); // Get bounding rect of the range oRcts = oTextRange. to get the text of the user's selection (if any) on the current page. In Acrobat, alas, there's no such thing (using JavaScript, at least). If you want to write a plug-in to do the requisite magic using Acrobat's famously labyrinthine C++ API, be my guest (I'll see you at Christmas).

Comments
  • 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
  • Can you please provide a fiddle of your current code?
  • Is this solution cross-platform?
  • This works in Chrome, firefox and Safari for sure. I have not tested it with other browsers.
  • I does not work with Chrome Version 58.0.3029.110 (64-bit)
  • @AndrewFount caniuse.com/#feat=dom-range It supposedly works in all modern browsers.