0

I'm trying to extend a user's text selection with JavaScript. The selection is across multiple non input elements.

I have successfully extended the text being captured in the selection using selection.setBaseAndExtent.

The problem: how do I update the visual as well? I want the user to see that the text selection has been extended. Is it possible to change the visual selection across elements?

Nothing I've tried so far has shown the selection changing, even the captured text does change. I've tried using different methods of selection and range. Is it possible to do this across sibling elements, rather than all nodes in the selection being descendants of one element (as in this answer: Selecting text in an element (akin to highlighting with your mouse))

This is a simplified version:

<div class="a">
  <div class="one">text</div>
  <div class="two">text</div>
</div>
<div class="b">
  <div class="three">text</div>
  <div class="four">text</div>
  <div class="five">text</div>
</div>
<div class="c">
  <div class="six">text</div>
</div>

If the user selects divs two, three & four, I want to extend the selection to include divs one, two, three, four & five. I want to extend the selection displayed to show this

(I am happy using vanilla js or jquery)

nabanino
  • 63
  • 1
  • 4
  • Not sure whether that is actually possible. Can you tell a little more about your usecase? – str Jan 07 '18 at 19:45
  • @str I updated my question with an illustration – nabanino Jan 07 '18 at 19:59
  • Please clarify how you use setBaseAndExtend. I think that you feed incorrect values. The following command should select everything in your browser. If not, please state your browser + version.. `let sel = getSelection(); sel.setBaseAndExtent(document.body, 0, document.body, document.body.childElementCount)` – dmonad Jan 07 '18 at 20:10

0 Answers0