We Keep Coding

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.

Accessing Text Label Value Javascript

Currently, I have a piece of java script that makes a table of cells where each cell has an ordered list of its number, a label, and a text box. A snippet of this code is written below:
<table id="drawAllQuestionsTbl">
<tbody><tr><td class="tbl">
<ol start="1">
<li>Sport 1: <input type="text" name="tq_g_0_guess" size="15"></li></ol></td></tr><tr><td class="tbl">
For brevity, I cut a lot of the extra stuff. In reality, this table is filled with around 10 replicas of this cell, where each cell has an ordered list with a label and text box. For the text box in this ordered list for instance, I can successfully access its value using document.getElementsByName("tq_g_0_guess"). However, my question is how to get the value of the label "Sport 1" next to this text box. Any ideas?

The following will give you the text of the li node. This will be Sport 1:.
var elParent = document.getElementsByName("tq_g_0_guess")[0].parentNode;
var labelText = elParent.innerText;
console.log(labelText); // Sport 1:
You can leverage labelText to further format the text to the desired result.
If you only want Sport 1, then you can substring the everything up to the colon
labelText.substr(0, labelText.indexOf(':'));

What about:
document.getElementsByName("tq_g_0_guess")[0].parentNode.innerText

writing in JavaScript:
var child = document.getElementsByName("tq_g_0_guess")[0]; // ok, must add a [0] after this.
var preTextNode = child.previousSibling;
var textContent = preTextNode.textContent; // this is the text you want.

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.

javascript / jQuery : get selected text's container

How can i get the id of the container (say, id of the p or div) of a user selected text?
I want to make list of selected texts, user selects a text then clicks on a button to add to the list.
And when user clicks the text from the list i want to highlight the place where original selection was made.
I need the id of the container because the selected text may not be unique and appear multiple times in the document.
i get the selected text like this Return HTML from a user-selected text

Here is one way it can be achieved cross browser (untested)
var getSelectionContainer = function() {
if (document.selection){ // IE
return document.selection.createRange().parentElement();
}
var select = window.getSelection();
if (select.rangeCount > 0) {
return select.getRangeAt(0).startContainer.parentNode;
}
};
Demo
(Select some text before 5 Seconds then look in the console)
Links
MDN window.getSelection
MDN selection.getRangeAt
MDN range.startContainer
MDN selection.rangeCount

window.getSelection().anchorNode - Gives you the DOM element where the selection started
window.getSelection().focusNode - Gives you the DOM element where the selection ended
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Selection?redirectlocale=en-US&redirectslug=DOM%2FSelection

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]");