在Chrome浏览器中防止contenteditable在按下Enter键时自动聚焦问题

Question

我有一个可编辑的div，在其中我控制一些键的行为。特别是，我有以下内容：

$('#my_contenteditable').on('keydown', function(e) {
  // Some code...
  if (e.key == 'Enter') {
    $(this).blur();
    e.preventDefault();
    return;
  }
  // Some more code...
});

但是，当我模糊该元素后，再次按下Enter键，Chrome想要重新聚焦它。 这里是JSFiddle演示 我能否阻止这种行为？

- Mat

Answer 1

if (e.keyCode == 13) {
    e.preventDefault()
    e.target.blur()
    window.getSelection().removeAllRanges()
}

- Kilmyashkin

Answer 2

<script>
$('#my_contenteditable').on('keydown', function(e) {
    if (e.key == 'Enter') {
    $(this).attr("contenteditable","false");

  }
});
</script>

- Prakhar Mathur

---

我不想移除contenteditable属性。只是让元素失去焦点。但用户之后必须能够再次编辑它。 - Mat

最终，你的答案带领我找到了解决方案。事实上，移除 contenteditable 很酷。我只需要在 click 事件中再次添加它即可。不知道这对无障碍性有何影响。 - Mat

Answer 3

感谢Prakhar Mathur的回答：

$('#my_contenteditable').on('click', function() {
  $(this).attr('contenteditable', 'true');
});
$('#my_contenteditable').on('keydown', function(e) {
  if (e.key == 'Enter') {
    $(this).attr('contenteditable', 'false');
    e.preventDefault();
    return;
  }
});

- Mat