1

(Using a recent Firefox v45 on Debian/Linux, if that matters)

I have the following elements in my web document:

<div id="mom_minieditcontentdiv_id" contenteditable="true">
<span id="mom$miniedit__3TnS01Ncdw7tV1" class="mom_minieditvalue_cl">°</span>
</div>

(actually, the DOM children of that <div id="mom_minieditcontentdiv_id" element are dynamically changing)

I'm typing the key a with the focus being after the ° sign above. The browser is (as I am expecting) updating the DOM to:

 <div id="mom_minieditcontentdiv_id" contenteditable="true">
 <span id="mom$miniedit__3TnS01Ncdw7tV1" class="mom_minieditvalue_cl">°a</span>
 </div>

In javascript, I'm using Jquery2, with the global var $contentdiv; initialized at $(document).ready time with:

    $contentdiv = $('#mom_minieditcontentdiv_id');

and I later set event handlers :

$contentdiv.on('input', function(ev) {
console.log("miniedit $contentdiv=", $contentdiv, " input ev=", ev, 
            " $(this)=", $(this));
});
$($contentdiv).keypress(function(ev) {
console.log("miniedit $contentdiv=", $contentdiv, " keypress ev=", ev, 
            " $(this)=", $(this));
});

How can I get inside these events handlers the adjusted and edited <span> of id="mom$miniedit__3TnS01Ncdw7tV1", that is the span actually processing the input or keypress event? Do I need to explicitly handle focus events?

(FWIW, the actual and full code is the MELT monitor (free software under GPLv3+ license), commit be9a045349674d01bb9...)

So how do I get the closest (and most inner, i.e. deepest) containing <span> for some keyboard (input or keypress) event handled by my contenteditable div (i.e. $contentdiv)?

The motivation is that I am trying to code some structured editor. So for every keyboard event, I need to get the innermost <span which is addressed by that event, i.e. which has the "focus".

Community
  • 1
  • 1
Basile Starynkevitch
  • 223,805
  • 18
  • 296
  • 547
  • you want the span inside the contenteditable ? – maioman May 18 '16 at 08:25
  • Yes, given a keyboard event, I want the closest and deepest ` – Basile Starynkevitch May 18 '16 at 08:27
  • But I have a keyboard event, I just want to know which DOM element is it currently changing? – Basile Starynkevitch May 18 '16 at 08:35
  • 1
    [This](http://stackoverflow.com/questions/1033004/keyboard-events-for-child-elements-in-a-contenteditable-div) for why the span isn't available through the event object. And [this](http://stackoverflow.com/questions/26353478/attaching-keypress-and-focusout-event-to-elements-inside-contenteditable-div) for a possible solution – Andreas May 18 '16 at 08:35

0 Answers0