双击时,实现用一个新建的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>