Jak wykryć, kiedy element potomny edytowalnego treści DIV jest edytowany za pomocą klawiatury?

Question

Biorąc pod uwagę ten kod HTML:

<div contenteditable> 
    .... 
    <span> child-element </span> 
    .... 
</div> 

Gdy użytkownik kliknie na elemencie SPAN (w celu umieszczenia daszka wewnątrz niego), a następnie naciska klawisz na klawiaturze znaków (w celu edycji tekstowych kierujących zawartość elementu SPAN), zdarzenie zostanie wywołane.

Jednak właściwość odpowiednich obiektów zdarzeń to nie element SPAN, ale sam element DIV.

żywo demo:http://jsfiddle.net/UKcMa/

Jak mogę określić, czy klucz zdarzenie miało miejsce wewnątrz elementu SPAN?

Answer 1

Można to zrobić za pomocą API wyboru:

$('div').keydown(function(e) { 
    if (document.selection) { 
     alert(document.selection.createRange().parentElement().tagName); // IE 
    } else { 
     // everyone else 
     alert(window.getSelection().anchorNode.parentNode.tagName); 
    } 
}); 

Uwaga: Powyższy przykład jest uproszczone. Zapoznaj się z zamieszczonym poniżej opisem SO, aby uzyskać kompletne rozwiązanie problemu selekcji.

Demo:

• http://jsfiddle.net/suVdX/

Odniesienia:

• https://developer.mozilla.org/en/DOM/Selection/anchorNode
• How can I get the DOM element which contains the current selection?

Answer 2

Tworzenie całości div do edycji oznacza, że ​​znacznik <span> to nic innego jak treść tekstowa. Jeśli chcesz tylko, aby span był edytowalny, ustaw contentEditable na samym zakresie.