HTML and CSS Reference
In-Depth Information
A simple example using a few of the drag and drop API properties and methods can be
found online at the topic support site.
O
NLINE
http://htmlref.com/ch2/draggable.html
contenteditable Attribute
First introduced by Internet Explorer, the proprietary
contenteditable
attribute is
supported by most browsers today. HTML5 standardizes the use of this attribute globally
on all elements. The basic sense of the attribute is that if you set it to
true,
the browser
should allow you to modify the text directly when you click the element:
<p contenteditable="true">
This paragraph of text is editable. Click it
and you will see. Of course there is no sense of saving it with code to
transmit the information to the server. This paragraph of text is editable.
Click it and you will see. Of course there is no sense of saving it with
code to transmit the information to the server.
</p>
The browser may or may not present a style change to show you are in “edit mode.”
Style change
upon edit
versus
No style change
upon edit
It is possible to use JavaScript to enable content editing by changing the corresponding
contentEditable
property for the element. For example, the following changes this
property and updates the
class
name to reflect a style change when in edit mode.
<p ondblclick="this.contentEditable=true;this.className='inEdit';"
onblur="this.contentEditable=false;this.className='';">
This paragraph
uses some simple script to be editable. Double-click the text to
begin editing.
</p>
