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

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

Introduction

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>

Style

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;
}

HTML

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

Output

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

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
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, 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.

 
Please SignUp/Login to comment...

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