Найти идентификатор целевого элемента курсора в contenteditable

Question

В contenteditable div у меня есть другой дочерний элемент id. Во время перемещения курсора внутри содержательного тега. Мне нужно получить идентификатор элемента позиции курсора.

Как это: пример

1. если cursor положение на one строке получить выход является идентификатор позиции курсора элемента как 1
2. если это two выход 2

Я стараюсь, как это но я не нашел идентификатор дочернего объекта курсора. его только на родителя.

function check(e){ 
 
    console.log($(e.target).attr('id')) 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contentEditable="true" id="res" tabindex="2" onkeydown="check(event)">solve: 
 
<span id="1">one</span> 
 
    <p id="2">two</p> 
 
    <i id="3">three</i> 
 
</div>

Answer 1

Вы можете сделать это следующим образом:

$('#res').on('keyup', function() { 
 
    var el = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode; 
 
    console.log(el.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contentEditable="true" id="res" tabindex="2">solve: 
 
    <span id="1" class='number'>one</span> 
 
    <p id="2" class='number'>two</p> 
 
    <i id="3" class='number'>three</i> 
 
</div>

Вы можете прочитать о window.getSelection() в этом link.

Вы можете прочитать о window.getSelection(), используемом в сочетании с getRangeAt(), с этим link.