Remove selection when contenteditable is focused

Question

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

When I dblclick the header I make it contenteditable, and then I set it to focus. I noticed after I dblclick the element, the text on that element is selected.

I still want to select text inside the element both before dblclick and after, but when dblclick is called I don't want to select any text.

Is there anyway to fix this?

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

score 3 · Accepted Answer · edited Sep 18 '19 at 16:19

Here, try this (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();
};

If you would like to set the cursor to a specific position as well, follow this:

Set cursor position on contentEditable <div>

Remove selection when contenteditable is focused

1 Answers1