CODEWITHSUNDEEP
javascriptjquerycontenteditable
thSoft
thSoft

Reputation: 22660

How to programmatically start/stop editing a contenteditable?

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...

Upvotes: 6

Views: 3003

Answers (2)

gral.pancho.villa
gral.pancho.villa

Reputation: 326

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");

Upvotes: 1

BenM
BenM

Reputation: 53246

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.

Upvotes: 5

Related Questions