contenteditableでカーソルをターゲットとする要素IDを見つける

Question

contenteditable divには、異なる子要素IDがあります。 カーソル移動時には、コンテンツ編集可能タグ内にがあります。私はカーソル位置の要素IDを取得する必要があります。このよう

：例

1. 私はこのようにしてみてくださいtwo出力2

であれば出力を得るone文字列上のcursor位置が 1

のようなカーソル位置の要素のidがある場合しかし、私はカーソルのターゲットの子供のIDを見つけることができません。それは親にしかない。

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>

あなたはこのlinkで約window.getSelection()を読むことができます。

getRangeAt()と組み合わせて使用​​されるwindow.getSelection()は、linkで読むことができます。