Получить элемент, изменяемый в contenteditable

Question

Как получить элемент, который редактируется?

HTML

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

Когда я редактирую «Первая линия», как я могу проверить, которые охватывают класс редактируется?

JS

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

Печатает весь класс сНа:

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

Но я просто хочу, чтобы получить <span class="1">First line</span>

Answer 1

Span element не может иметь input/keypress/keyup ... eventsevents и те, не может быть зарегистрирован на нем. Хотя есть другие способы сделать это, вы могли бы или использовать событие DOMCharacterDataModified, проверить снимок ниже.

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

Вы должны влиять на атрибут contenteditable индивидуальны для каждой части вы планируете изменить.
Вам нужно будет выбрать способ добавления прослушивателя событий к ним. Например, как это:

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>