双击div变成可编辑区的简单实现
双击时,实现用一个新建的input元素替换div,然后当input失去焦点时先把input的内容传给原来的div,并用该div重新替换input,代码如下
[javascript]
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元素
document.body.replaceChild(inputElement, divElement);
// 当inputElement失去焦点时触发下面函数,使得input变成div
inputElement.onblur = function() {
//把input的值交给原来的div
divElement.innerHTML = inputElement.value;
//用原来的div重新替换inputElement
document.body.replaceChild(divElement, inputElement);
}
}
<div id="divElement">双击文字实现可编辑状态</div>
注:当想控制某一个div实现该函数时可以实现双击事件ondblclick
比如<div id="someDiv" ondblclick="toReplace(this)">双击文字实现可编辑状态</div>
补充:web前端 , HTML/CSS ,