javascript - 当 contenteditable 获得焦点时删除选择

Question

fiddle 1:http://jsfiddle.net/LmaYP/
fiddle 2:http://liveweave.com/adAgUN

当我双击标题时，我将其设置为内容可编辑，然后将其设置为焦点。我注意到在双击该元素后，该元素上的文本被选中。

我仍然想在 dblclick 之前和之后选择元素内的文本，但是当调用 dblclick 时我不想选择任何文本。

有办法解决这个问题吗？

$("header").on('dblclick', function() {
  $(this).prop('contenteditable', true).focus();
});

Answer 1

在这里，试试这个(fiddle):

JQuery:

$("header").on('dblclick', function() {
    $(this).prop('contenteditable', true);
    window.getSelection().removeAllRanges();
    $(this).focus();
});

Javascript:

document.querySelector("header").ondblclick = function() {
  this.contentEditable = true;
  window.getSelection().removeAllRanges();
  this.focus();
};

如果您也想将光标设置到特定位置，请按照以下步骤操作:

Set cursor position on contentEditable <div>