How to make a div editable on Click?

I would like to make div editable to enter contents in it and on changing content, want to call ajax to save data in back-end.

I know we can do it using Textbox, but would like to make a <div> inside <td> to make it editable when user clicks inside it.

Asked by:- bhanu
: 777 At:- 11/27/2019 6:15:20 PM
jQuery make div editable on click

1 Answers
profileImage Answered by:- vikas_jk

To make <div> or <td> editable in your HTML, you can simply use "contenteditable" attribute for that element and it will be editable.

So according  to your requirement you can make it editable on load or on click

<div contenteditable="true">This is editable content.</div>

On Page Load:

Suppose, you want to make div with class .Editable on page loading simply use the jQuery code as below:


All element's which has class "Editable" can have editable text inside div.

On Click Solution:


<div id="MainDiv">
  This is editable Content


$("#MainDiv").on("click", function(){

Working Fiddle link.

At:- 11/30/2019 8:03:27 AM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly