I use Range and Selection extensively in bililiteRange in regular elements in standards-based browsers. I initially implemented scrolling a range by inserting an empty element, using scrollIntoView on that, then deleting the element.
But it turns out adding and removing elements messes up the selection. So I had to change it to manipulate scrollTop directly.
It's an odd bug, seeming random. In the following (in a "real" browser, Chrome or Firefox) double click on some words, click the button and watch the selection change. Selecting the same text with clicking and dragging does not. I'm not sure what is going on.
<pre class=selectiontest contenteditable>
<strong>First</strong> line.
<em>Second</em> line.
Third line.
</pre>
<button class=selectiontest >Modify selection</button>function selectionSize(){
return window.getSelection().getRangeAt(0).toString().length;
}
document.querySelector('button.selectiontest').addEventListener('click', function(){
var sel = window.getSelection().getRangeAt(0);
console.log(selectionSize());
var span = document.createElement('span');
sel.insertNode(span);
span.parentNode.removeChild(span);
document.querySelector('pre.selectiontest').focus();
console.log(selectionSize());
});This has been mentioned elsewhere but no reasons, just workarounds.
Leave a Reply