Использование элемента в contentEditable требует двух кликов для первого редактирования - PullRequest
Новая
       13

Использование элемента в contentEditable требует двух кликов для первого редактирования

0 голосов
/ 21 марта 2019

Я пытаюсь редактировать данные, хранящиеся в таблице, и выбираю использовать contentEditable для элементов div внутри <td> s, и я сталкиваюсь с действительно странной проблемой.Когда я начинаю редактировать его в первый раз, я должен щелкнуть дважды, каждый раз после этого я должен нажимать только один раз.Но с первой попытки редактирования мне нужно дважды нажать.Вот пример строки таблицы из моего HTML: 

<tr style="width:100%"> <td><div class="results" onblur="blurMe(event)" onclick="darkenBox(event)" onkeypress="enterKey(event)" >Adam McGurk</div></td><td><div class="results" onblur="blurMe(event)" onkeypress="enterKey(event)" onclick="darkenBox(event)">amcgurk@shinesolar.com</div></td><td class="delete-sales-person"><span class="delete-icon"></span></td></tr>

А вот соответствующий JS: 

//Only to be used with changing data to gray on click and border on hover.
function darkenBox(e){
    const ele = e.path[0];
    ele.setAttribute("contenteditable", true);
    console.log("Editing cell data");
    ele.classList.add("darkenBox")

}

// Allows user to edit content by click
function clickEdit(e) {
    e.path[0].setAttribute("contenteditable", true);
}

//Deleted placeholder text on click
function clearText(e) {
    const ele = e.path[0];
    ele.setAttribute("contenteditable", true);
    ele.innerText='';
}

// Allows user to stop editing by pressing the, "Enter" key.
function enterKey(e){

    const keyCode = e.keyCode;
    const ele = e.path[0];
    if (keyCode === 13) {
        ele.classList.remove("darkenBox");
        ele.setAttribute("contenteditable", false);
    }

}

function blurMe(e) {
    const editedElement = e.path[0];
    editedElement.classList.remove("darkenBox");
}

Почему он требует от менящелкните дважды, чтобы отредактировать в первый раз?

Ответы [ 2 ]

1 голос
/ 22 марта 2019

При первом щелчке он устанавливает contenteditable на true.Нажатие не отменяет этого.Во второй раз, когда вы нажимаете, contenteditable по-прежнему true.Это позволяет вам активировать элемент и редактировать его сразу.Если вы хотите отредактировать его по первому щелчку, вы можете включить все элементы, которые вы хотите редактировать, начиная с contenteditable.Или вы можете сфокусировать элемент после включения contenteditable. 

ele.setAttribute("contenteditable", true);
ele.focus();

На неродной ноте, это в настоящее время не работает вообще в Firefox, и я рекомендую вам использовать e.target вместо e.path[0].

1 голос
/ 22 марта 2019

Ваши дивы начинаются без приемлемого набора.Когда вы нажимаете на них (в первый раз), вы устанавливаете для contenteditable значение true, но щелчок уже обработан, поэтому редактирование не будет запускаться.Только при следующем щелчке браузер разрешит редактирование, поскольку теперь contenteditable имеет значение true.

Установите для contenteditable значение true непосредственно в html и должно работать.

...