setting the caret/cursor position to the end of a contenteditable div

Question

For a contenteditable div, in order to fix a number of FireFox specific issues. I had to append a br tag to the end of the div.

 <div id="testDiv" contentEditable="true">
Hey, click the button then hit space.<br>    
</div>

This is actually how google plus handles their contentEditable div logic with their user tagging.

Problem now is that moving the cursor to the end of the div in firefox means the caret is after the
tag and hitting space moves to the next line.

You can test that behavior here: jsFiddle by clicking the button the hitting the space key.

I'm using the following code to move the caret to the last position of the range:

function placeCaretAtEnd(el) {
            el.focus();
            if (window.getSelection){
                if (typeof window.getSelection != "undefined"
                        && typeof document.createRange != "undefined") {
                    var range = document.createRange();
                    range.selectNodeContents(el);
                    range.collapse(false);
                    var sel = window.getSelection();
                    sel.removeAllRanges();
                    sel.addRange(range);
                } else if (typeof document.body.createTextRange != "undefined") {
                    var textRange = document.body.createTextRange();
                    textRange.moveToElementText(el);
                    textRange.collapse(false);
                    textRange.select();
                }
            }
        }

Would it be possible to alter this code to ignore the br tag or move the cursor position instead to immediately before the br tag?

Answer 1

No idea if this will help anyone else out. This does not work cross-browser, but since my issue was specific to FireFox and how it handles range/selection with BR tags, this seemed to solve my issue.

I can basically just set the end of the range before the BR

range.setEndBefore($(el).find('br')[0]);

so in my function I am doing this only for firefox:

 function placeCaretAtEnd(el) {
                    el.focus();
                    if (window.getSelection){
                        if (typeof window.getSelection != "undefined"
                                && typeof document.createRange != "undefined") {
                            var range = document.createRange();
                            range.selectNodeContents(el);
                            range.collapse(false);
                            if ($('#browser-version-check').val() == 'firefox') {
                                range.setEndBefore($(el).find('br')[0]);
                            }
                            var sel = window.getSelection();
                            sel.removeAllRanges();
                            sel.addRange(range);
                        } else if (typeof document.body.createTextRange != "undefined") {
                            var textRange = document.body.createTextRange();
                            textRange.moveToElementText(el);
                            textRange.collapse(false);
                            textRange.select();
                        }
                    }
                }

And here is an updated jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/ , did not include browser check so this demo will only work correctly in FireFox