在没有插入多余标签的情况下关闭<ul />标签

Question

在令人满意的情况下使用无序(或有序)列表让我头疼.

每当我想通过按ENTER两次结束编辑列表时,浏览器将关闭<ul />但插入包含a的<p />(Firefox)或<div />(Chrome)标签<br />.
这里的例子

我的目标是避免多余的<p />或 <div />,而是直接关闭<ul />.
我试图修改Tim Down的解决方案,这将阻止浏览器插入<p />或 <div />按下ENTER,而是插入一个干净的<br />标签.
这里的例子

但不幸的是,使用该解决方案的时候<ul />是从来没有浏览器,因为只有关闭<br />标签插入内的<li />项目.

所以我的问题是:

如何<ul />在最后一个空按Enter键时通过插入节点或粘贴html 来主动关闭<li />？

更新:如果问题不明确:我正在寻找一种方法来关闭<ul />没有插入<p />或<div />标签,但只是插入一个良好的旧平原<br />而不是

Answer 1

与您的尝试类似,当用户按下Enter:Demo时,我们会修改contenteditable

if (window.getSelection) { // w3c
    $('div').keypress(function (e) {
        var sel, node, children, br, range;
        if (e.which == 13) {
            sel = window.getSelection();
            node = $(sel.anchorNode);
            children = $(sel.anchorNode.childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (sel.isCollapsed && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.createRange();
                range.setStartAfter(br.get(0));
                range.setEndAfter(br.get(0));
                sel.removeAllRanges();
                sel.addRange(range);

                // remove <li>
                node.remove();
            }
        }
    });

} else if (document.selection) { // internet explorer
    $('div').keypress(function (e) {
        var range, node, children;
        if (e.which == 13) {
            range = document.selection.createRange();
            node = $(range.parentElement());
            children = $(range.parentElement().childNodes);

            // if nothing is selected and the caret is in an empty <li>
            // (the browser seems to insert a <br> before we get called)
            if (!range.htmlText.length && node.is('li') && (!children.length ||
                    (children.length == 1 && children.first().is('br')))) {
                e.preventDefault();

                // if the empty <li> is in the middle of the list,
                // move the following <li>'s to a new list
                if (!node.is(':last-child')) {
                    node.parent().clone(false)
                        .empty()
                        .insertAfter(node.parent())
                        .append(node.nextAll());
                }

                // insert <br> after list
                br = $('<br>').insertAfter(node.parent());

                // move caret to after <br>
                range = document.body.createTextRange();
                range.moveToElementText(br.get(0));
                range.collapse(false);
                range.select();

                // remove <li>
                node.remove();
            }
        }
    });
}

请注意,这不会处理用户在按Enter之前选择了某些内容的情况.如果你想处理这种情况,你需要弄清楚用户是否选择了整个内容<li>(这看起来不是一件简单的事),如果是这样的话,删除内容并将其视为同样的如果用户在空中按Enter键<li>.