Keypress-Ereignis auf verschachtelte Inhalte bearbeitbar (jQuery)

Ich habe eine CONTENTEDITABLE div und innerhalb dieses div habe ich ein span CONTENTEDITABLE, was ich tun möchte, ist in der Lage zu handhaben, die onkeypress-Ereignis auf die inneren SPAN.

So, der javascript-code wäre:

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

Und den HTML-Inhalt wäre:

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

Wenn Sie es testen auf einem browser, werden Sie sehen, Sie sehen nicht die 'test' - dialog, wenn Sie eine Taste drücken, über einen TEXT, ich weiß, das problem ist, dass das Ereignis ausgelöst wird, in dem übergeordneten div, so dass die SPANNE nicht der Fall, auch weil es nicht den Fokus haben. Ich möchte Ihre Hilfe, um eine Lösung zu finden.

Könnte Sie erstellen Sie eine Beispiel auf jsfiddle um das problem zu illustrieren?
AFAIK Tastendruck nicht Blase durch das Dokument (für die nicht-Eingabe-Elemente). Sie konnte nur erkennen, eine normale Tastendruck, und überprüfen Sie, ob #someid Fokus hat.
Dies scheint zu funktionieren: jsfiddle.net/EMThL/2
Ok, ich erkannte das Beispiel, das ich gab, war falsch, ich aktualisierte das Beispiel jsfiddle.net/TwgkC/5 und Sie können überprüfen, es funktioniert nicht, es hängt die Zeitspanne, wenn eine beliebige Taste gedrückt wird auf #mydiv, aber dann wird das keypress-Ereignis nicht ausgelöst, auf das eingefügte span.

InformationsquelleAutor Coder | 2011-02-21

  1. 6

    Den genauen code, den Sie geschrieben, die in Ihrer Frage scheint zu funktionieren gut in http://jsfiddle.net/gaby/TwgkC/3/

    Getestet und arbeiten mit FF, Oper, Chrome, Safari, IE8 ..

    einzige änderung ist das entfernen der Kommentar in seiner jetzigen form erzeugt einen syntax-Fehler.

    Den #someid müssen den Fokus haben, damit der Tastendruck funktioniert.

    Wenn Sie möchten, dass Ihr code, um den Fokus auf das element direkt nach dem erstellen, verwenden Sie die .focus() Methode.

    function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();//bring focus to the element once you append it..
}

    Update

    Zwei Möglichkeiten, dies zu behandeln (die Tatsache, dass es geschachtelte contenteditable Elemente), nicht sicher ob es einer ist akzeptabel für Ihren Fall, aber hier sind Sie..

    1. wickeln Sie die neue contenteditable span in ein anderes, die ist auf contenteditable="false"

      (demo: http://jsfiddle.net/gaby/TwgkC/10/)
    2. machen #mydiv nicht contenteditable sobald Sie fügen Sie die Spannweite..

      (demo: http://jsfiddle.net/gaby/TwgkC/11/)
    Ok, ich erkannte das Beispiel, das ich gab, war falsch, ich aktualisierte das Beispiel jsfiddle.net/TwgkC/5 und Sie können überprüfen, es funktioniert nicht, es hängt die Zeitspanne, wenn eine beliebige Taste gedrückt wird auf #mydiv, aber dann wird das keypress-Ereignis nicht ausgelöst, auf das eingefügte span.
    aktualisierte Antwort auf die Anforderungen der Frage.. (besser, Bearbeiten Sie die ursprüngliche Frage hinzufügen, dass #mydiv ist auch contenteditable, wir reden also über verschachtelte contenteditables)
    Ok, es ist nicht die ideale Lösung, aber ich kann damit arbeiten, vielen Dank.
    so viel Zeit verschwendet... confirmiing, der trick mit der Verschachtelung falsch -> true, innerhalb wahr ist, ermöglicht es, richtig zu hören auf Ereignisse, die auf geschachtelten Elements mit contentEditable auf true gesetzt danke 🙂

    InformationsquelleAutor Gabriele Petrioli

  2. 1

    Könnten Sie besser zu binden, das keypress-Ereignis der #mydiv element wie diesem:

    $('#mydiv').delegate("span", "keypress", function(){
    console.alert('A key has been pressed: ' + this.id);
});

    Auf weitere Untersuchungen erscheint es jedoch, dass die DOM-Elemente, wie z.B. die regelmäßigen Spannweiten und divs sind unfähig, den Fokus erhalten. Sie können in der Lage sein, dies zu umgehen, jedoch, indem Sie ein tabindex-Attribut zu jedem span.

    Nein, gerade getestet und funktioniert nicht.
    +1: nach Ihrer Beratung, das funktioniert auch: $("#mydiv span").klicken Sie auf(Funktion(){ $(this).attr("tabindex",0).focus(); }); Dann ist das event richtig übergeben. Danke!
    Leider ist der "tabindex" hack scheint nur zu funktionieren in Webkit. Ein weiteres problem ist, dass es erfordert eine klicken Sie auf und wenn Sie die Taste "rechts" oder "Links" - Taste, zum Beispiel, der Fokus geht wieder zu seinem editierbare Eltern...

    InformationsquelleAutor Phil.Wheeler

Schreibe einen Kommentar