雙擊div變成可編輯區的簡單實現

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" ondblclick="toReplace(this)">雙擊文字實現可編輯狀態</div>