CODEWITHSUNDEEP
javascripthtml
user3918985
user3918985

Reputation: 4419

Get element being changed in contenteditable

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>

Upvotes: 2

Views: 647

Answers (2)

The Process
The Process

Reputation: 5953

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>

Upvotes: 5

cFreed
cFreed

Reputation: 4474

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>

Upvotes: 0

Related Questions