remove outline for element after making it not editable
After I click ENTER on an editable <li> element, I want to simple exit
editing mode (no blinking cursor) and make <li> element not editable. I
removed default orange outline, and it's not there when I'm typing. But
once I hit ENTER it appears. Why it's there and how can I remove it? Here
is jsFiddle and actual code:
<!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>
No comments:
Post a Comment