How to programmatically start/stop editing a contenteditable?

Question

What kind of event do I need to fire to programmatically start or stop actually editing a contenteditable, like when the user focuses or blurs it? I tried .focus(), .click(), setting the selection to its content, but none of them seem to work.

EDIT: .focus() does work, just make sure the contenteditable node is already inserted to the document...

What do you mean "start" or "stop" editing the element? The user is the one who starts or stops editing. Are you looking for an event to fire when they have done that? — Elliot Bonneville, Jan 24 '14 at 23:15
When a user clicks in a contenteditable, a caret shows up and it responds to editing keyboard events. I want to activate this "editing mode" from JavaScript. — thSoft, Jan 24 '14 at 23:18

score 5 · Accepted Answer · answered Jan 24 '14 at 23:19

5

You can use the trigger() method inside jQuery:

$('div[contenteditable="true"]').trigger('focus');

This will cause the caret to appear on page load, as per this jsFIddle demo.

answered Jan 24 '14 at 23:19

BenM

52,573
26
113
168

Drat! Although I tried this, it didn't work because the contenteditable DOM node wasn't inserted into the DOM tree when I called .focus(). My bad. – thSoft Jan 24 '14 at 23:29

score 1 · Answer 2 · answered Jan 24 '14 at 23:28

Maybe you are looking for disabled and readonly attributes.

HTML:
<input type="text" disabled="disabled" />

Javascript:
document.getElementsByTagName("div")[0].setAttribute("disabled", "disabled");

other option is

HTML:
<input type="text" readonly="readonly" />

Javascript:
document.getElementsByTagName("div")[0].setAttribute("readonly", "readonly");

How to programmatically start/stop editing a contenteditable?

2 Answers2