How to place a caret inside an empty DOM Node element

Question

How to place the cursor (folded range) inside an empty node element. This code should work, but it does not.

node = document.getElementById('some-empty-strong-node') range = document.createRange() range.selectNodeContents(node) window.getSelection().addRange(range) 

Try other tricks, such as adding empty node text inside the node element or setting the start of the range inside the node and the end of the range elsewhere, and then flattening the range also doesn't work. Does Anoion have an idea?

Answer 1

This is possible in Firefox and Opera, but not in both WebKit and IE <= 8.

WebKit has a long error to fix it: https://bugs.webkit.org/show_bug.cgi?id=15256 for the empty case element and https://bugs.webkit.org/show_bug.cgi?id=23189 for general cases of placing a caret at the beginning of the node text. The last thing I heard is likely to be a few years before it is fixed.

IE <= 8 has all kinds of problems around the choice, of which this is only one. IE 9 introduced DOM2 Range support and HTML5 selection support, and your code may well work in IE 9 (I can't check it right now).