Événement Keypress sur le contenu imbriqué modifiable (jQuery)

J'ai un CONTENTEDITABLE div et à l'intérieur de ce div, j'ai un CONTENTEDITABLE durée, ce que je veux faire est d'être capable de gérer l'événement onkeypress à l'intérieure de la DURÉE.

Ainsi, le code javascript:

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

Et le contenu HTML serait:

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

Si vous le tester sur un navigateur, vous verrez que vous ne verrez pas le "test" boîte de dialogue lorsque vous appuyez sur une touche sur Certains textes, je sais que le problème est que l'événement est déclenché dans le div parent, de sorte que la DURÉE n'a pas obtenir de l'événement, aussi parce qu'il n'a pas l'accent. Donc j'aimerais votre aide pour trouver une solution pour cela.

Pourriez-vous créer un exemple sur jsfiddle pour illustrer le problème?
Autant que je sache pression de touche n'a pas de bulle dans le document (pour les non-saisie d'éléments). Vous pourriez simplement détecter une normale de pression de touche, et de vérifier si #someid a le focus.
Cela semble fonctionner: jsfiddle.net/EMThL/2
Ok, j'ai réalisé l'exemple que j'ai donné était mauvais, j'ai mis à jour l'exemple jsfiddle.net/TwgkC/5 et vous pouvez vérifier cela ne fonctionne pas, il ajoute la durée lorsqu'une touche est appuyée sur #mydiv, mais alors l'événement keypress n'est pas déclenché sur l'insertion des span.

OriginalL'auteur Coder | 2011-02-21

  1. 6

    Le code exact où vous avez posté votre question semble très bien fonctionner à http://jsfiddle.net/gaby/TwgkC/3/

    Testé et de travail avec FF, Opéra, Chrome, Safari, IE8 ..

    seul changement est la suppression du commentaire qui, dans sa forme actuelle crée une erreur de syntaxe.

    La #someid besoin d'avoir pour le keypress de travail.

    Si vous voulez que votre code pour donner le focus à l'élément à droite après sa création, l'utilisation de la .focus() méthode.

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

    Mise à jour

    Deux façons de gérer cette (le fait qu'il n'y sont imbriqués contenteditable éléments), ne sais pas si tout est acceptable pour votre cas, mais ici, ils sont..

    1. envelopper le nouveau contenteditable durée dans un autre, qui ont contenteditable="false"

      (démo: http://jsfiddle.net/gaby/TwgkC/10/)
    2. faire #mydiv de ne pas être contenteditable une fois que vous ajouter la durée..

      (démo: http://jsfiddle.net/gaby/TwgkC/11/)
    Ok, j'ai réalisé l'exemple que j'ai donné était mauvais, j'ai mis à jour l'exemple jsfiddle.net/TwgkC/5 et vous pouvez vérifier cela ne fonctionne pas, il ajoute la durée lorsqu'une touche est appuyée sur #mydiv, mais alors l'événement keypress n'est pas déclenché sur l'insertion des span.
    mise à jour de réponse pour s'adapter aux nouvelles exigences de la question.. (mieux modifier la question d'origine d'ajouter que #mydiv est également contenteditable, nous parlons donc imbriquée contenteditables)
    Ok, ce n'est pas la solution idéale, mais je peux travailler avec, merci.
    autant de temps perdu... confirmiing que tromper avec l'imbrication de faux -> vrai dans vrai, permet de bien écouter les événements d'élément imbriqué avec contentEditable défini à true, merci 🙂

    OriginalL'auteur Gabriele Petrioli

  2. 1

    Vous pourriez être mieux de lier l'événement keypress pour le #mydiv élément comme ceci:

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

    Sur la poursuite de l'enquête, cependant, il semble que des éléments du DOM comme les travées et les divs sont incapables de recevoir le focus. Vous pouvez être en mesure d'obtenir autour de cette cependant, en ajoutant un attribut tabindex à chaque travée.

    Nah, juste testé et ne fonctionne pas.
    +1: Suite à vos conseils, cela fonctionne: $("#mydiv span").cliquez sur(function(){ $(this).attr("tabindex",0).focus(); }); Ensuite, l'événement est passé correctement. Merci!
    Malheureusement, le "tabindex" hack " ne semble travailler dans Webkit. Un autre problème est qu'il nécessite un clic et si vous appuyez sur la touche "droite" ou "gauche", par exemple, l'accent va à nouveau à ses modifiable parent...

    OriginalL'auteur Phil.Wheeler