CODEWITHSUNDEEP
javascripthtml
lyborko
lyborko

Reputation: 2619

How to select text of the two elements with contentEditable = true?

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

Upvotes: 1

Views: 989

Answers (1)

Arman Ozak
Arman Ozak

Reputation: 2344

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.

Upvotes: 6

Related Questions