Question

对于一个可信的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标记之前？

Answer 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中正常工作

将插入符/光标位置设置为可信任div的末尾

1 个答案: