Simple implementation of double-click div into editable Area

Double-click the input element to replace the div with a newly created input element. When the input loses focus, the content of the input is first transmitted to the original div, and the input is replaced with the div. The Code is as follows:

 

[Javascript]
Window. onload = function (){
// It is initialized during loading. this indicates the div whose id is oldDiv.
Document. getElementById ("divElement"). ondblclick = function (){
ToReplace (this)
}
}
 
// This function is used to create an input element to replace the div.
// When the input element loses focus, it changes back to the original div
ToReplace = function (divElement ){
// Create an input element
Var inputElement = document. createElement ("input ");
// Assign the elements and text content in obj to the newly created inputElement.
InputElement. value = divElement. innerHTML;
 
// Replace the original oldDivElement element with the newly created inputElement
Document. body. replaceChild (inputElement, divElement );
// Trigger the following function when inputElement loses focus so that the input is converted into a div
InputElement. onblur = function (){
// Hand over the input value to the original div
DivElement. innerHTML = inputElement. value;
// Replace inputElement with the original div
Document. body. replaceChild (divElement, inputElement );
}
}
 

<Div id = "divElement"> double-click the text to edit the text </div>

Note: When you want to control a div to implement this function, you can double-click the event ondblclick.

For example, <div id = "someDiv" ondblclick = "toReplace (this)"> double-click the text to implement editable state </div>