If I programatically remove the focus of a content editable div, it looks like it has no focus, but then if the user types it still has focus.

$("#myContentEditable").focus();
$("#myContentEditable").blur();

If you then start typing, it still has focus.

/

This doesn't happen on text inputs.

Any idea how to actually remove focus?

I suppose I could give another text input focus, but Id have to create it on the fly, focus it, and destroy it. A bit hacky to say the least....

If I programatically remove the focus of a content editable div, it looks like it has no focus, but then if the user types it still has focus.

$("#myContentEditable").focus();
$("#myContentEditable").blur();

If you then start typing, it still has focus.

https://jsfiddle/zvn4w61d/

This doesn't happen on text inputs.

Any idea how to actually remove focus?

I suppose I could give another text input focus, but Id have to create it on the fly, focus it, and destroy it. A bit hacky to say the least....

• javascript
• jquery
• html

• Can you share full code block of what you want? – user3497034 Commented Sep 11, 2015 at 12:05
• Its pretty plicated to put the actual code in, but we have a CK editor instance, and when that is closed I want to be able to capture the user pressing the arrow keys so we can move the div that holds CK. However, I cant release the focus of the DIV, so pressing the up arrow just re opens CK as it re focuses the editbale div. Ill add a more plete JS fiddle ...... – Matt Bryson Commented Sep 11, 2015 at 12:21

3 Answers 3

You can use selection object representing the range of text selected by the user or the current position of the caret along with removeAllRanges to remove all ranges from the selection:

window.getSelection().removeAllRanges();

Working Demo

Add this code to your main javascript file and all contenteditable ponents will work fine.

$(function(){
  	$(document).on('mousedown', '[contenteditable]', function(e){
		$(this).attr('contenteditable', true);
		$(this).focus();
	});

	$(document).on('blur', '[contenteditable]', function(e){
		$(this).attr('contenteditable', false);
	});
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div contenteditable>This is a content editable div that the blur really works</div>

You can do this by CSS

Try this

#myContentEditable:read-write:focus {
     outline: none;
}

Demo Here