CODEWITHSUNDEEP
javascriptjqueryhtmlcssnode.js
user3815508
user3815508

Reputation: 399

Get all nodes at caret in a "contentEditable-Div"

I try to get all nodes at caret in a "contentEditable-Div". Always after Key-Down all node are to list.

<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>

The Key-Down function in jQuery:

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

If the caret is by "Google Chrome", then I expect a result as follows: div -> ol -> li or if the caret is by "This-is-a-pointer", then I expect a result as follows: div -> P -> ol -> li -> h4

I tried something as follows:

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

But that doesn't deliver the expected solution. Any Idea? Thanks in advance.

Upvotes: 1

Views: 356

Answers (1)

Sergey
Sergey

Reputation: 5476

It works incorrectly because $(event.target).children().prop("tagName") returns tagName of the first child inside id="MyDiv".

You can try to use document.elementFromPoint(x, y) method for search DOM element.

x and y - mouse coordinates. You can get them like it is described in this post.

You can see the sample here.

Hope it helps.

Upvotes: 1

Related Questions