1

I would like to ask, how can I select text of the two HTML elements, which property contentEditable is set to true. When I start to select text with mouse in one element, the selection ends within it's range. Never reach the second element.

I tried to apply also "user-select" property, but without effect.

here is snippet.

<body>
<div contentEditable = true style="position:absolute; left: 10px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
Donec tempus, nisi a pharetra placerat, diam nisi aliquam elit, a consectetur magna enim sed ligula. 
</div>

<div contentEditable = true style="position:absolute; left: 130px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
The oldest browsers support only one way of registering event handlers, the way invented by Netscape. 
</div>
</body>
thanx a lot
Said Torres
  • 581
  • 3
  • 14
lyborko
  • 2,571
  • 3
  • 26
  • 54
  • if you must use pure javascript see http://stackoverflow.com/a/9496574/3574819 . otherwise use a library like jquery or something similar – FuzzyTree Feb 17 '16 at 23:24
  • @FuzzyTree, I couldn't get the relation. How is that answer going to help? – Arman Ozak Feb 17 '16 at 23:28
  • @ArmanOzak it provides a function that lets op select all elements by attribute (in this case contentEditable) – FuzzyTree Feb 17 '16 at 23:31
  • @FuzzyTree, the question is not about selectors. It is about text selection. – Arman Ozak Feb 17 '16 at 23:32
  • @FuzzyTree, of course, javascript is the last resort, probably there is not nice trick to solve this. But I feel, it may be pretty nasty programming. I hope, that something usable might exist. – lyborko Feb 17 '16 at 23:33
  • @lyborko ah ok, I was thinking javascript because of the tag. anyway, no harm done, that's what comments are there for :) – FuzzyTree Feb 17 '16 at 23:38
  • @FuzzyTree, ouch... sorry for messing it up... my fault... :-) – lyborko Feb 17 '16 at 23:41

1 Answers1

6

You can wrap these <div>s inside another <div> and make it contentEditable="true" instead of these two.

<body>
  <div contentEditable="true">
    <div style="position:absolute; left: 10px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
Donec tempus, nisi a pharetra placerat, diam nisi aliquam elit, a consectetur magna enim sed ligula.</div>
    <div style="position:absolute; left: 130px; top:10px; width:100px; height:200px; border: 3px solid #73AD21;">
The oldest browsers support only one way of registering event handlers, the way invented by Netscape.</div>
  </div>
</body>

JS Bin here.

Arman Ozak
  • 2,304
  • 11
  • 11
  • Perfect... :-) It does exactly what I asked, but I see unexpected results too... Thanx a lot... – lyborko Feb 17 '16 at 23:43