Question

当用户使用此功能键入内容可编辑的div时，我目前正在尝试始终将光标设置在结尾处：

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

我在contenteditable div的change函数中这样调用此函数：

switch (e) {
    case"keypress":
        if (0 === Ie(n)) return null;
        placeCaretAtEnd(jQuery(this));
        break;
}

但是当我开始输入时，这会导致控制台中出现以下错误：

未捕获的TypeError：无法在“ Range”上执行“ selectNodeContents”：参数1的类型不是“节点”。

这是我的div：

<div aria-describedby="placeholder-ead45" class="notranslate public-DraftEditor-content" contenteditable="true"
     role="textbox" spellcheck="false"
     style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;">
    <div data-contents="true">
        <div class="" data-block="true" data-editor="ead45" data-offset-key="2g033-0-0">
            <div data-offset-key="2g033-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr">
                <span data-offset-key="2g033-0-0"><span data-text="true">sd</span></span></div>
        </div>
    </div>
</div>

Answer 1

我现在已经用肮脏的方式修复了它。它可以工作，但是我不确定这是否是一个好的解决方案。我在文档中添加了keydown侦听器，并在函数中检查contenteditable div是否聚焦。如果是，则单击输入，以删除空格并阻止intermittent lag：

case"keydown":
    if (jQuery('.public-DraftEditor-content').is(':focus')) {
        jQuery('.public-DraftEditor-content').click();
    }

（此案子是打开输入）

JS：在contenteditable div的最后设置光标位置不起作用

1 个答案: