Please enable Javascript for better experience...
How to make a div editable
By Rahul Kumar Jha | Jul 29, 2016 | In Tips | Update: Jul 29, 2016 | Total Views [ 3221 ]
Taged In
(0 Like)

You can create an editable div using contenteditable attribute on your element.


To make an editable div, you just need to add contenteditable="true|false" property to your element. Below div has this property and this will work like editable.

<div contenteditable="true">Hello this is an editable div</div>


Let's add some style so that it may look like a textarea element.

.editableDiv {
    width: 50%;
    height: 100px;
    overflow: auto;
    padding: 5px;
    resize: both;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid #ccc;


<div class="editableDiv" contenteditable="true">Hello this is a div which looks like a textbox</div>


Thanks for reading the article. I will write more soon. Till than be connected...

Share this

About the Author

Rahul Kumar Jha
Rahul Kumar Jha
Founder, Developer

Public profile: user/profile/99900001

Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, ANGULAR, ANGULAR JS, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments

Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID