Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Make an HTML Element Editable

HTML5 provides the contenteditable attribute which makes most HTML elements editable. Shown below is code to make a div element editable.

<div id="editbox" style="border-style:solid; border-width:1px; height:200px; width:300px" contenteditable="true"></div>

Possible values for the contenteditable attribute are true, false, or inherit. inherit sets an element's editability to the same as its parent element. The default value is false, which makes an element NOT editable.

The contenteditable attribute is compatible with most current browsers, including Internet Explorer 6 and higher, Firefox 3.5 and higher, and Chrome 4.0 and higher.

Once you make an HTML element editable, it's assumed that you would want to get the text out of it. Shown below is example code that creates a JavaScript function to access an element's contents, and creates a form button to call that function. Of course you might want to submit that contents to the server. How to that is not explained here because it depends upon the language and method you want to use.

<script>
function showText()
{
   alert(document.getElementById("editbox").innerHTML);
}
</script>

<form>
<input type="button" value="Save" onclick="showText()">
</form>

More HTML Code:
• Text Input Box Basics
• Use HTML Target Attribute to Specify Where to Open Document
• HTML Frames Basics
• HTML title Tag
• HTML center Tag
• When to Use the nofollow Attribute value
• HTML List Basics
• Use fieldset to Organize Form Elements
• HTML Text Tags Basics
• 


Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268