Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an HTML <div> element editable cross-browser?

Do you know how to make a <div> editable with JavaScript? I'm looking for cross-browser solution.

Something similar to a rich text area, but that uses an editable <iframe>. I need something similar for a <div>.
I don't want to use a replacement textbox.

like image 780
Cristian Toma Avatar asked Jul 27 '09 14:07

Cristian Toma


People also ask

How do I make a div element editable in HTML?

Answer: Use the HTML5 contenteditable Attribute 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 you make an editable content in HTML?

To edit the content in HTML, we will use contenteditable attribute. The contenteditable is used to specify whether the element's content is editable by the user or not. This attribute has two values. true: If the value of the contenteditable attribute is set to true then the element is editable.

How do I make content editable 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.

Which attribute makes the content of HTML element editable?

All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable.


1 Answers

I found out how.

You use the contentEditable property of the DOMElement, like so

<div onClick="this.contentEditable='true';">     lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor </div> 
like image 182
Cristian Toma Avatar answered Oct 07 '22 03:10

Cristian Toma