Did you ever thought to make an editable div element or <p>, <span>, etc. that works the same as a Text field and Textarea.
Some websites allow the user to edit their content by just pointing to the content and start to update it.
You will already know that <div> is a read-only container that means you can’t edit the content inside of it.
In this tutorial, I show how you can do this with the contentEditable attribute.
Contents
1. contentEditable Attribute
This attribute will be used to make read-only HTML elements into the text editor. After adding this attribute you can easily edit the text inside the element same as a Textarea.
The contentEditable attribute takes – empty string, inherit, true, or false.
Define contentEditable attribute with value true to make an element editable.
You can reverse the element state by specifying value false to the attribute or removing the attribute.
Example –
In the example, I have added contentEditable attribute to the <div>, <span>, <label>, and <p> element.
<div class='editable' contentEditable="true">Click and edit the text</div> <span class='editable' contentEditable="true">Click and edit the text</span><br/> <label class='editable' contentEditable="true">Click and edit the text</label><br/> <p class='editable' contentEditable="true">Click and edit the text</p>
Output
Try to edit the value of the element.
2. With JavaScript
Below is the complete code –
<script type='text/javascript'>
function addRemoveAttr(){
var contenteditable = document.getElementById('txt1').contentEditable;
if(contenteditable == 'inherit' || contenteditable == 'false'){
document.getElementById('txt1').contentEditable = true;
}else{
document.getElementById('txt1').contentEditable = false;
}
}
</script>
<div class='editable' id='txt1' >Click and edit the text</div>
<input type='button' id='but_enable' value ='click' onclick='addRemoveAttr();'>
Here, created a <div> which didn’t contain contentEditable attribute and a Button element. When Button gets clicked calling addRemoveAttr(); function.
Within the function checking contentEditable attribute value on <div id=’txt1′> if the value is inherit or false then assign true to the contentEditable attribute.
document.getElementById('txt1').contentEditable = true;
Otherwise set to false.
document.getElementById('txt1').contentEditable = false;
Output
Click on the Button to enable or disable the editing on the <div>
3. Conclusion
You can use this as a replacement for the Textbox or Text area in your project. But it is not a good choice within the form where you have to POST the input data because it doesn’t get the POST.
If you want to save the value of the container you can use AJAX which you can call on Button click.
If you found this tutorial helpful then don't forget to share.