1

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.

user3815508
  • 369
  • 4
  • 20

1 Answers1

1

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.

Community
  • 1
  • 1
Sergey
  • 5,396
  • 3
  • 26
  • 38
  • Ok, but the use of "elementFromPoint" is not suitable for Key-Dwon. Because if the arrow-keys moves, then the Nodes-Tag-Name are to display. I changed it a little [here](http://jsfiddle.net/0vL1v5u4/8/). But it don't still function correctly. I expect something as follows: Div -> P-> Span -> H4. – user3815508 Oct 07 '14 at 13:48
  • 1
    Looks like your code works wrong, because you use block element `h4` inside inline element `span`. For example, if you replace `h4` with `em` or some another inline element, it will work right. See [this](http://jsfiddle.net/0vL1v5u4/10/) sample. – Sergey Oct 07 '14 at 17:15
  • 1
    But if you replace em with p element, it won't again work correctly! – user3815508 Oct 07 '14 at 19:46
  • 1
    Yes, because `p` is **block element** too. – Sergey Oct 07 '14 at 20:29
  • Ok, but how can I get all tagName from a thread? Alternatively it could be as follows [here](http://jsfiddle.net/0vL1v5u4/12/) (thanks). – user3815508 Oct 07 '14 at 20:38
  • 1
    Just use semantic markup. [Here](http://jsfiddle.net/okh2vcw0/1/) you can see a difference between valid and invalid markup. Also see [this atricle](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). "You can also group a heading and its content using the
    element." If you want to get tagName for all parent elements, use $.parents(). More info is [here](http://api.jquery.com/parents/).
     – Sergey Oct 07 '14 at 21:13