当前位置:编程学习 > html/css >>

双击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  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,