Javascript 将插入符号/光标位置设置为contenteditable div的结尾

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

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

---

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

不知道这是否有助于其他人。这不适用于跨浏览器，但由于我的问题是特定于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();
                        }
                    }
                }

---

这是一个更新的JSFIDLE，没有包括浏览器检查，所以这个演示只能在FireFox中正常工作，不知道这是否能帮助其他人。这不适用于跨浏览器，但由于我的问题是特定于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();
                        }
                    }
                }

---

这是一个更新的JSFIDLE，没有包含浏览器检查，所以这个演示只能在FireFox中正常工作

，那么问题出在哪里？如果我在Firefox和Chrome中运行Fiddle而不使用

标记，我会得到相同的功能，但是我注意到使用br标记时的区别。我可以更新Fiddle，但是在处理contenteditable元素中不可编辑的html元素时，
标记是非常必要的。例如，如果我在“可编辑”中有一个输入，它将不会使用退格一致地删除，并且我将无法将焦点放在元素后面的末尾。那么问题是什么？如果我在Firefox和Chrome中运行Fiddle而不使用

标记，我会得到相同的功能，但是我注意到使用br标记时的区别。我可以更新Fiddle，但是在处理contenteditable元素中不可编辑的html元素时，
标记是非常必要的。例如，如果我在“可编辑”中有一个输入，它将不会使用退格一致地删除，并且我将无法将焦点放在元素后面的末尾。