Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 contentEditable with jQuery

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

like image 771
David Avatar asked Sep 07 '10 01:09

David


People also ask

What is Contenteditable in HTML5?

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

How do you make an h1 tag editable in HTML?

You can set the HTML5 contenteditable attribute with the value true (i.e. contentEditable="true" ) to make an element editable in HTML, such as <div> or <p> element.

How do I make Contenteditable in JavaScript?

You can add the contenteditable="true" HTML attribute to the element (a <div> for example) that you want to be editable. If you're anticipating a user to only update a word or two within a paragraph, then you could make a <p> itself editable.


2 Answers

$('#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.

like image 52
Rex M Avatar answered Nov 02 '22 23:11

Rex M


$("#container *").attr("contentEditable", true)

Just a guess. Away from workstation.

like image 40
mkoistinen Avatar answered Nov 03 '22 00:11

mkoistinen