HTML5 contentEditable with jQuery

jquery html contenteditable
David picture David · Sep 7, 2010 · Viewed 33.7k times · Source

I have some elements that need to have the text inside editable, for this I am using the HTML 5 attribute contentEditable. I can't seem to do use jQuery for this using multiple selectors. What I want to do is have every tag inside a container div be editable. Here's an example of what it would look like if it worked with jQuery:

$("#container <all tags here>").contentEditable = "true";

I dont know how to make it select all tags but you get the point.

So all span, div, tables, bold, etc should be editable individually

Answer

Rex M picture Rex M · Sep 7, 2010 
$('#container *').attr('contenteditable','true');

* means "all element types", and is analogous to a,div,span,ul,etc...

Like most other jQuery functions, attr applies the same operation to every element captured by the selector.

Related questions

contenteditable change events

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event? I'm using jQuery so any solutions that uses jQuery is preferred. Thanks!

Read More
Set cursor position on contentEditable <div>

I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on' <div> regains focus. It appears default functionality of a content editable div is to move the …

Read More
Prevent contenteditable adding <div> on ENTER - Chrome

I have a contenteditable element, and whenever I type some stuff and hit ENTER it creates a new <div> and places the new line text in there. I don't like this one little bit. Is it possible to …

Read More