如何讓一個元素回到JavaScript中不可編輯的狀態？

我正在嘗試製作一個用戶自制的列表，它大部分都是應該做的。不過，我注意到的一件事是，當我點擊其中一個列表項目上的編輯按鈕時，它仍然可以對整個會話進行編輯。當用戶點擊除編輯按鈕或目標列表項以外的其他元素時，我希望它停止編輯。如何讓一個元素回到JavaScript中不可編輯的狀態？

HTML：

<ul id="todoList"> 
    <li v-for="item in items" contenteditable="false" id="item">{{item}} 
    <div></div> 
     <button id="editButton" contenteditable="false" onclick="edit(event)">Edit</button>

JS：

var editB=document.getElementById("editButton"); 
var tdList=document.getElementById("todoList"); 
var listItem = document.getElementById("item"); 

function edit(event) { 
    var button = event.target, 
    li = button.parentNode; 
    li.setAttribute("contenteditable", true); 
}

來源

2017-04-15 user147219

假如你不使用jQuery，你可以監聽的待辦事項列表mousedown事件和復位每一個「編輯」選項，除非你點擊與node.addEventListener按鈕：

var editB=document.getElementById("editButton"); 
var tdList=document.getElementById("todoList"); 
var listItem = document.getElementById("item"); 

function contentEditable(node) { 
    node.setAttribute("contenteditable", true); 
} 

function edit(event) { 
    var button = event.target, 
    li = button.parentNode; 
    contentEditable(li); 
} 

tdList.addEventListener('mousedown', function(event) { 
    var editable = document.querySelectorAll("li.item"); 
    var target = event.target; 
    var id = target.getAttribute("id"); 

    editable.forEach(function(li){ 
    li.setAttribute("contenteditable", false); 
    }) 

if(id == "editButton") {edit(event)} 
if(id == "item") {contentEditable(target)} 
})

您還需要一種方法來查詢「當前可編輯」的東西。我添加了一個選擇器裏，並已刪除的按鈕contenteditable屬性：

<ul id="todoList"> 
    <li v-for="item in items" class="item" contenteditable="false" id="item">Item 
    <div></div> 
    <button id="editButton">Edit</button> 
    </li> 
</ul>

JSFiddle here to try it out

我希望這有助於！

來源

2017-04-15 20:10:49

您無法編輯...點擊列表並嘗試輸入內容，您將'contenteditable'設置爲false。 – Oen44

良好的通話！固定 –

我希望它的工作就像你的預期。您可以單擊外部文本或按鈕以禁用編輯。

var editB = document.getElementById("editButton"); 
 
var tdList = document.getElementById("todoList"); 
 
var listItem = document.getElementById("item"); 
 
var inEdit = false; 
 

 
function edit(event) { 
 
    var button = event.target, 
 
    li = button.parentNode; 
 
    inEdit = !inEdit; 
 
    li.setAttribute("contenteditable", inEdit); 
 
} 
 

 
document.addEventListener('mouseup', function(event) { 
 
    if (event.target.getAttribute == "editButton" || !event.target.hasAttribute("contenteditable")) { 
 
    var lists = document.querySelectorAll("[contenteditable='true']"); 
 
    for (var i = 0; i < lists.length; i++) { 
 
     lists[i].setAttribute("contenteditable", false); 
 
    } 
 
    } 
 
});

<ul id="todoList"> 
 
    <li v-for="item in items" contenteditable="false" id="item">{{item}} 
 
    <button id="editButton" onclick="edit(event)">Edit</button> 
 
    </li> 
 
</ul>

來源

2017-04-15 20:02:24 Oen44

如何讓一個元素回到JavaScript中不可編輯的狀態？

回答

相關問題