jsdom可編輯div

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);
    }
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容