Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add "contenteditable" attribute to element using Javascript?

Tags:

javascript

I'm drawing a div with Javascript and adding various attributes to it as I build it. I can get ids, classes and style attributes working but it just ignores "contenteditable".

var elemText = document.createElement('div');
elemText.className = 'elem';
elemText.style.background = "none";
elemText.id = "elementID";
elemText.contenteditable = "true";

I've also tried

elemText.attributes['contenteditable'] = "true";

Still no joy.

like image 979
colmtuite Avatar asked Jan 03 '14 15:01

colmtuite


People also ask

How do you use 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.

What is Contenteditable attribute?

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 use Contenteditable?

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 use Contenteditable in HTML?

Definition and Usage The contenteditable attribute specifies whether the content of an element is editable or not. Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.

What is a contenteditable attribute?

The contenteditable attribute is a Global Attribute, and can be used on any HTML element. The numbers in the table specify the first browser version that fully supports the attribute.

How do I make an HTML element editable?

All we have to do is set the contenteditable attribute on nearly any HTML element to make it editable. Here's a simple example which creates a element whose contents the user can edit. Thanks for contributing an answer to Stack Overflow!

How to set placeholder for a contentEditable element?

Placeholder for a contenteditable element 1 Use the :empty selector#N#We use a custom attribute, data-placeholder, to set the placeholder:#N#<div class="editable"... 2 Handle the events More ...

How do I know if an element is editable?

More "Try it Yourself" examples below. The contentEditable property sets or returns whether the content of an element is editable or not. Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not. The numbers in the table specifies the first browser version that fully supports the property.


1 Answers

The property is contentEditable (note the capital 'E'). Attributes are set using setAttribute() rather than the attributes collection. So, either of the following will work:

elemText.contentEditable = "true";
elemText.setAttribute("contenteditable", "true");
like image 151
Tim Down Avatar answered Oct 04 '22 22:10

Tim Down