How To Place Caret Inside An Empty Dom Element Node

How can I place the caret (collapsed range) inside an empty element node. This code is supposed to work, but it doesnt. node = document.getElementById('some-empty-strong-node') ran

Solution 1:

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

WebKit has a long-standing bug to fix this: https://bugs.webkit.org/show_bug.cgi?id=15256 for the empty element case and https://bugs.webkit.org/show_bug.cgi?id=23189 for the general case of placing the caret at the start of a text node. Last I heard it's likely to be years before it's fixed.

IE <= 8 has all kinds of issues around selections, of which this is but one. IE 9 introduced DOM2 Range support and HTML5 Selection support and your code may well work in IE 9 (I can't test it right now).

Solution 2:

A trick to that is to use a placeholder (so it disapear when placing the caret). Worked for me with "display: inline" div on chrome.

.css

[invisibleplaceholder]:empty:before{
    content: attr(invisibleplaceholder);
    color: transparent;
    cursor: text;
}

[invisibleplaceholder]:empty:focus:before{
    content: "";
}

.html

<div id="div1" contenteditable="true" invisbleplaceholder="."></div>
<div id="div2" contenteditable="true" invisibleplaceholder="."></div>

.js

$("body").click(function(){
        var range = document.createRange();
        var sel = window.getSelection();
        var node = $('div2')[0]; //your node
        range.setStart(node, 0); //your position in node
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    });

Solution 3:

I found that if you do this for Chrome:

<divid="select-this-element"><brstyle="content: no-close-quote;" /></div>

It will work the same way that works in Firefox and Opera.