javascript – 可插入的标签,不插入多余的标签

使用无符号(或有序)的列表中,可以令人头痛.

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

我的目标是避免多余的“或< div />而只是关闭< ul />.
我试图修改Tim Down’s解决方案,这将阻止浏览器插入< p />或< div />当按ENTER键,而不是插入一个干净的< br />标签.
Example here

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

所以我的问题是：

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

更新：如果问题stll不清楚：我正在寻找一种关闭< ul />而不插入< p />或< div />标签,但只是插入一个好的旧平原< br />代替

解决方法

类似于您的尝试,当用户按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,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>的全部内容. (这似乎不是一件简单的工作),如果是这样,删除内容并将其视为与空的< li>中的用户按Enter键相同.

原文地址：https://www.jb51.cc/js/154126.html