1

在可编辑的 <li> 元素上单击 ENTER 后，我想简单地退出编辑模式（没有闪烁的光标）并使 <li> 元素不可编辑。我删除了默认的橙色轮廓，并且在我打字时它不存在。但是一旦我点击 ENTER ，它就会出现。为什么它在那里，我该如何删除它？这是 jsFiddle和实际代码：

<!DOCTYPE html>
<html>
<head>
<style>
[contenteditable="true"]:active,
[contenteditable="true"]:focus{
    border: 1px solid rgb(179,179,179);
    outline:0px solid transparent;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(document).ready(
function() {
$('#click_me').click(function() {
    var item = "<li class='option-item new' contenteditable='true'>simple element2<li>"
    var container = $("#ctx-options");
    container.append(item);
    var $last = $(".option-item", container).last();
    //neither of these works
    $last.focus();
});

$("#ctx-options").on('keydown', '.option-item.new', function(e) {  
    if(e.keyCode == 13)
    {
        e.preventDefault();
        $(this).attr('contentEditable', false);
    }
})

});
</script>
</head>
<body>
    <span id="click_me">click me</span>
    <ul id="ctx-options"></ul>
</body>
</html>
4

2 回答 2

3

您将属性设置为 false，因此 CSS 选择器[contenteditable="true"]不再匹配元素，并且轮廓变得可见。做就是了 ：

.option-item {outline: none;}

解决它！

小提琴

于 2013-08-17T17:42:41.897 回答
1

您需要添加以下 CSS 以摆脱橙色轮廓：

li {
    outline-color: transparent;
}

http://jsfiddle.net/shaunp/rjB3k/3/

于 2013-08-17T17:43:11.893 回答