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

1

オレンジ色のアウトラインを取り除くには、次の CSS を追加する必要があります。

li {
    outline-color: transparent;
}

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

于 2013-08-17T17:43:11.893 に答える