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.
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.
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.
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.
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.
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.
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!
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 ...
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.
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With