Question

当按回车键在contenteditable div中创建新行时，我不知何故需要使用br标签而不是div标签（默认方式）在contenteditable div中创建一个新行，代码的行为工作正常但不知何故有我无法修复的错误，也就是说，如果将插入符号放在第2行的开头（在第1行和第3行之间）并按下回车键，则插入符将移至第3行，无法创建新的br标记并创建新行，这不好，因为它与div标签不一样。

我想要的结果是在第2行按下回车键后，插入符号应移动到前一个“line3”位置，而“line3”应移动到第4行。

任何人都可以帮忙弄清楚为什么没有新的标签制作以及如何解决这个问题？

function getSelectionTextInfo(el) {
    var atStart = false, atEnd = false;
    var selRange, testRange;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            selRange = sel.getRangeAt(0);
            testRange = selRange.cloneRange();

            testRange.selectNodeContents(el);
            testRange.setEnd(selRange.startContainer, selRange.startOffset);
            atStart = (testRange.toString() == "");

            testRange.selectNodeContents(el);
            testRange.setStart(selRange.endContainer, selRange.endOffset);
            atEnd = (testRange.toString() == "");
        }
    } else if (document.selection && document.selection.type != "Control") {
        selRange = document.selection.createRange();
        testRange = selRange.duplicate();

        testRange.moveToElementText(el);
        testRange.setEndPoint("EndToStart", selRange);
        atStart = (testRange.text == "");

        testRange.moveToElementText(el);
        testRange.setEndPoint("StartToEnd", selRange);
        atEnd = (testRange.text == "");
    }

    return {atEnd};
}

$('div[contenteditable]').keydown(function(e) {
    // trap the return key being pressed
    if (e.keyCode === 13) {
        var selInfo = getSelectionTextInfo(this);
        if(selInfo.atEnd===true){
         document.execCommand('insertHTML', false, ' <br><br>');
        return false;
        }
        else if(selInfo.atEnd===false){
                 document.execCommand('insertHTML', false, ' <br>');
        return false;
        }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="ninjia" contenteditable="true" autocomplete="off" spellcheck="false">line1<br><br>line3</div>

Answer 1

我建议使用一些开源程序来协调contenteditable的行为或使用textarea元素，并在编辑后将\ n替换为<br>标记

Javascript：按下输入键开始新的第一行：使用<br/>模仿<div>

1 个答案: