我有一个内容可编辑的DIV,其中包含带有文本的P标签,并且正在使用placeCaretAtEnd将插入号放置在P标签内内容的末尾。除Firefox(v32.0.3)之外,这似乎对所有浏览器都适用。在那之后,插入符号似乎只是消失了。

据我所知,据说placeCaretAtEnd JS函数与Firefox完全兼容。知道为什么在这种情况下不起作用吗?

工作示例位于:http://jsfiddle.net/0ktff3zj/1/

<input id=button type=button value="Caret to end">
<div contenteditable=true>
    <p id="paragraph">Sample text. Sample text.</p>
</div>

<script>
$('#button').bind('click', function() {
    placeCaretAtEnd(document.getElementById('paragraph'))
});

function placeCaretAtEnd(el) {
    el.focus();
    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();
    }
}
</script>

最佳答案

通过将光标置于contenteditable div中,然后使用placeCaratAtEnd函数将其移动,来解决此问题。

首先,我给div一个ID,这样就不会混淆了。

$('#button').bind('click', function() {
    $('div#id').focus();
    placeCaretAtEnd(document.getElementById('paragraph'))
});


我一直搜寻,虽然我知道这有点骇人听闻,但这是一种解决方案。

关于javascript - placeCaretAtEnd似乎在Firefox中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26220246/

10-09 18:39