双击div变成可编辑区的简单实现

2019独角兽企业重金招聘Python工程师标准>>>

1. window.onload = function() {  
2.     // 加载的时候就被初始化，此处的this是指id为oldDiv的div  
3.     document.getElementById("divElement").ondblclick = function() {  
4.         toReplace(this)  
5.     }  
6. }  
7.   
8. // 此函数功能是新建一个input元素替换div  
9. //当input元素失去焦点时又变回原来的div  
10. toReplace = function(divElement) {  
11.     // 创建一个input元素  
12.     var inputElement = document.createElement("input");  
13.     // 把obj里面的元素以及文本内容赋值给新建的inputElement  
14.     inputElement.value = divElement.innerHTML;  
15.   
16.     // 用新建的inputElement代替原来的oldDivElement元素  
17.     divElement.parentNode.replaceChild(inputElement, divElement);  
18.     // 当inputElement失去焦点时触发下面函数，使得input变成div  
19.     inputElement.onblur = function() {  
20.         //把input的值交给原来的div  
21.         divElement.innerHTML = inputElement.value;  
22.         //用原来的div重新替换inputElement  
23.         inputElement.parentNode.replaceChild(divElement, inputElement);  
24.     }  
25. } 

<div id="divElement">双击文字实现可编辑状态</div>

注：当想控制某一个div实现该函数时可以实现双击事件ondblclick

比如<div id="someDiv" οndblclick="toReplace(this)">双击文字实现可编辑状态</div>

转载于:https://my.oschina.net/u/2415525/blog/724925