在contenteditable

时间:2016-12-12 14:18:51

标签: javascript jquery html css cursor

在contenteditable div中,我有不同的子元素id。 光标移动时 在contenteditable标记内。我需要获取光标位置元素id。

像这样:示例

  1. 如果在cursor字符串上的one位置得到输出是光标位置元素的id,就像 1
  2. 如果two输出2
  3. 我尝试这样但我找不到光标目标子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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:1)

你可以这样做:

&#13;
&#13;
$('#res').on('keyup', function() {
  var el = window.getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
  console.log(el.id);
});
&#13;
<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>
&#13;
&#13;
&#13;

您可以在此link了解window.getSelection()

您可以在此link上阅读与window.getSelection()结合使用的getRangeAt()