1. 程式人生 > >雙擊div變成可編輯區的簡單實現

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

   雙擊時,實現用一個新建的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>