Как отследить клик на contenteditable-контейнере?

Question

[cocomuffin]

Доброго времени суток!
Есть contenteditable="true" контейнер, внутри него прочие html-элементы (абзацы). Необходимо отследить, что пользователь сейчас находится внутри этого контейнера и что-то там пишет. Такое возможно сделать? Привязка событий "click" и "focus" не работают.

https://jsfiddle.net/1Lfe6umk/

Answer 1

[Андрей Охотников]

Событие input
<div contenteditable="true" id="editor">Text</div>

let div = document.getElementById("editor")
div.addEventListener("input", function() {
    console.log(div.innerText);
}, false);

Comments

[cocomuffin]

Это если есть внесенные изменения. А если пользователь просто кликнул внутри контейнера, но ничего не ввел еще, вот это событие как-то можно отловить?

[Андрей Охотников]

cocomuffin,

let div = document.getElementById("editor")
let isActive = false;
div.addEventListener("click", function() {
   isActive = true;
  console.log(isActive)
});

document.addEventListener("click", function(e) {
  if(e.target !== div) {
    isActive = false;
    console.log(isActive)
  }
});