双击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" οndblclick="toReplace(this)">双击文字实现可编辑状态</div>