요소를 자바 스크립트에서 편집 할 수 없게 만드는 방법?

Question

나는 사용자가 만든 목록을 만들려고 노력하고 있으며 그 목록은 대부분의 것을 수행합니다. 내가 알아챈 한 가지는, 목록 항목 중 하나에서 편집 버튼을 클릭하면 세션 전체에 대해 편집 가능한 상태로 유지된다는 것입니다. 사용자가 해당 편집 단추 또는 대상 목록 항목 이외의 다른 요소를 클릭하면 편집 가능한 것을 멈추고 싶습니다.

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); 
} 

Answer 1

는 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

내가이 도움이 희망을!

Answer 2

당신이 예상처럼이 일하고 바랍니다. 외부 텍스트를 클릭하거나 버튼을 클릭하여 편집을 비활성화 할 수 있습니다. 당신을 가정

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>