获取在contenteditable中被更改的元素

Question

How do I get the element that is being edited?

HTML

<div contenteditable=true>
  <pre>
    <span class="1">First line</span>
    <span class="2">Second line</span>
  </pre>
</div>

When I'm editing "First line", how do I check which span class is being edited?

JS

window.addEventListener("input", inputHandler, false);
function inputHandler(e) {
  console.log(e.target);
}

Prints out the entire div class:

<div contenteditable=true>
  <pre>
    <span class="1">First line</span>
    <span class="2">Second line</span>
  </pre>
</div>

But I just want to get <span class="1">First line</span>

Answer 1

Span element can't have input/keypress/keyup ... events and those events can't be registered on it. Although there are other ways to accomplish this, you could alternatively use DOMCharacterDataModified event, check the snippet below.

 var div = document.getElementById("edit"); div.addEventListener("DOMCharacterDataModified", inputHandler, false); function inputHandler(e) { var elem = e.target.parentNode; alert("Element: " + elem.tagName + " class name: " + elem.className); } 

 <div id="edit" contenteditable=true> <pre> <span class="1">First line</span> <span class="2" >Second line</span> </pre> </div> 

Answer 2

You must affect the contenteditable attribute individually to each piece you plan to modify.
You'll have to choose how to add event listener to all of them. For instance, like this:

 var editables = document.getElementsByClassName('editable'); for (var editable of editables) { editable.addEventListener("input", inputHandler, false); } function inputHandler(e) { console.log(e.target); } 

 <div> <pre> <span class="editable 1" contenteditable>First line</span> <span class="editable 2" contenteditable>Second line</span> </pre> </div>