使用无符号(或有序)的列表中,可以令人头痛.
每当我想通过按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键相同.
