Hey! Do you have any query related to front end?

Sign in Sign up

Real time content editBack

This can b achieved by only applying the javascript property ("contentEditable") when user double click on the container, and when user clicks outside the div a blur event executes, which replace the value of editableContent from true to false.

Code has been explained below:

    loadDom = function(){
	//Get the editable container id and store it in a variable
	var editableContainer = document.getElementById('editableContainer');
	//Add double click event on eidatble container id
			editableContainer.ondblclick = function(){
	//Add class to the eidatble container
	this.className = 'editable';
	//Add editable property to eidatble container and give the vlaue to true
	this.contentEditable = true;
//Add on blur event on eidatble container id
editableContainer.onblur = function(){
	//Add editable property to eidatble container and give the vlaue to false
	editableContainer.contentEditable = false;
	//remove the class name to restore the design
	editableContainer.className = '';
	//Run ajax to strore the content of the editable container.
	var editableContainerHTML = editableContainer.innerHTML;
	//Check for result
//load the DOM on page load
window.onload = function(){

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Hanging menu on window scroll

    After scrolling window beyond menu height, a floating bar appears at the top having same menu inside it.

    • 343
    • 13
    • 343
    • facebook icon
    • twitter icon
    • google plus
  • Single slide respo slider plugin

    Simple jQuery content slider plugin

    • 476
    • 36
    • 476
    • facebook icon
    • twitter icon
    • google plus
  • Detect device by javascript

    A simple javascript to detect device

    • 293
    • 1
    • 293
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back