Редактирование ячейки таблицы по двойному щелчку

Question

Как сделать так, чтобы содержимое ячейки можно было редактировать только при двойном щелчке без jQuery? Сделал нечто подобное:

function setEditable(cell) {

    if (cell.getAttribute("contenteditable") == undefined) {
        cell.setAttribute("contenteditable", true);
    } else {
        cell.removeAttribute("contenteditable");
    }

}

Функция вызывается при событии ondblclick

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

Мне нужно, чтобы при двойном щелчке ячейка выбиралась в фокус на втором клике и сразу можно было редактировать. А по завершении работы фокус пропадал, пока снова не кликнут по ячейке два раза. Как это сделать?

Answer 1

Правильнее было бы не через contenteditable делать, а заменять содержимое на input.

cell.addEventListener('dblclick', () => {
  // создаём поле
  const input = document.createElement('input');
  input.value = cell.textContent;

  // очищаем ячейку
  while (cell.firstChild) {
    cell.removeChild(cell.firstChild);
  }

  // вставляем поле и даём ему фокус
  cell.appendChild(input);
  input.focus();

  // вешаем обработчик потери фокуса
  input.addEventListener('blur', () => {
     // удаляем поле
     cell.removeChild(input);

     // добавляем текст в ячейку
     cell.appendChild(document.createTextNode(input.value));
  });
});

Ну или если нужен многострочный текст, то использовать:

const input = document.createElement('textarea');

и для ячейки дать стиль:

white-spacing: pre;

БЛОГ НА HUSL

Редактирование ячейки таблицы по двойному щелчку

Ответы (1 шт):