1

对于一个 contenteditable div，为了修复一些 FireFox 特定的问题。我不得不在 div 的末尾附加一个 br 标签。

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

这实际上是 google plus 如何使用他们的用户标记来处理他们的 contentEditable div 逻辑。

现在的问题是在Firefox中将光标移动到div的末尾意味着插入符号在
标签之后并且点击空格移动到下一行。

您可以在此处测试该行为：jsFiddle通过单击按空格键的按钮。

我正在使用以下代码将插入符号移动到范围的最后一个位置：

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();
                }
            }
        }

是否可以更改此代码以忽略 br 标记或将光标位置移动到 br 标记之前？

4

1 回答 1

1

不知道这是否会帮助其他人。这不适用于跨浏览器，但由于我的问题特定于 FireFox 以及它如何使用 BR 标签处理范围/选择，这似乎解决了我的问题。

我基本上可以在 BR 之前设置范围的结尾

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

所以在我的功能中，我只为 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();
                        }
                    }
                }

这是一个更新的 jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/，不包括浏览器检查，所以这个演示只能在 FireFox 中正常工作

于 2013-08-05T23:42:57.910 回答