雙擊div變成可編輯區的簡單實現
阿新 • • 發佈:2019-02-08
雙擊時,實現用一個新建的input元素替換div,然後當input失去焦點時先把input的內容傳給原來的div,並用該div重新替換input,程式碼如下
window.onload = function() { // 載入的時候就被初始化,此處的this是指id為oldDiv的div document.getElementById("divElement").ondblclick = function() { toReplace(this) } } // 此函式功能是新建一個input元素替換div //當input元素失去焦點時又變回原來的div toReplace = function(divElement) { // 建立一個input元素 var inputElement = document.createElement("input"); // 把obj裡面的元素以及文字內容賦值給新建的inputElement inputElement.value = divElement.innerHTML; // 用新建的inputElement代替原來的oldDivElement元素 divElement.parentNode.replaceChild(inputElement, divElement); // 當inputElement失去焦點時觸發下面函式,使得input變成div inputElement.onblur = function() { //把input的值交給原來的div divElement.innerHTML = inputElement.value; //用原來的div重新替換inputElement inputElement.parentNode.replaceChild(divElement, inputElement); } }
<div id="divElement">雙擊文字實現可編輯狀態</div>
注:當想控制某一個div實現該函式時可以實現雙擊事件ondblclick
比如<div id="someDiv" ondblclick="toReplace(this)">雙擊文字實現可編輯狀態</div>