Question

我尝试在＆＃34; contentEditable-Div＆＃34;中将所有节点放在插入符号中。在Key-Down之后总是要列出所有节点。

<div id="MyDiv" contentEditable="true">
<h1>header</h1>
<p>this is a test </p>
<a href="http://www...">Href-Test</a>
    <ol>
      <li>Google Chrome</li>
      <li>Internet Explorer</li>
      <li>Mozilla Firefox</li>
      <li>Safari</li>
      <li>Opera</li>
    </ol>
<p> 123
    <ol>
        <li><strong> 1 2 3 </strong> Test </li>
        <li><h4>This-is-a-pointer</h4></li>
    </ol> 
</p>
<br />
<ul> <li> Test "<em>Test</em>&nbsp;<b>Test</b>" </li></ul>

jQuery中的Key-Down函数：

$("#MyDiv").keydown(function(event) {
alert('1. '+  event.target.nodeName );
alert('2. '+  ' ? ' );
alert('3. '+  ' ? ' ); });

如果插入符号是＆＃34; Google Chrome＆＃34;，那么我希望得到如下结果： div - ＆gt; ol - ＆gt;里或者如果插入符是＆＃34;这是一个指针＆＃34;，那么我期望得到如下结果： div - ＆gt; P - ＆gt; ol - ＆gt; li - ＆gt; H4

我尝试了以下内容：

    alert('1->'+  event.target.nodeName ); // --> DIV
alert('2->'+ $(target.children()).prop('tagName') ); // --> P
alert('3->'+ $(target.children().children()).prop('tagName') ); // --> I

但这并没有提供预期的解决方案。任何的想法？提前谢谢。

Answer 1

它工作不正确，因为$(event.target).children().prop("tagName")返回id="MyDiv"内第一个孩子的tagName。

您可以尝试使用document.elementFromPoint(x, y)方法搜索DOM元素。

x和y - 鼠标坐标。你可以像this post。

中描述的那样得到它们

您可以看到示例here。

希望它有所帮助。

在＆＃34; contentEditable-Div＆＃34;中获取插入符号中的所有节点

1 个答案: