L'élément ContentEditable ne réagit pas sur les raccourcis clavier

Je développe une extension Chrome qui injecte le code JS dans tous les onglets ouverts. La tâche de ce code comprend l'affichage d'une zone de texte, mise en œuvre en tant que contentEditable <div> pour permettre le formatage. Cependant, l'élément contentEditable ne fonctionne pas bien avec certains sites Web, par exemple, Twitter.

Essayez-le vous-même:

1. Aller à twitter
2. Coller javascript:document.body.setAttribute('contentEditable', true); Dans la barre d'adresse et appuyez sur Entrée.
3. Cliquez n'importe où dans le document – vous devriez maintenant pouvoir éditer le texte.
4. Essayez de taper un j ou k . Vous verrez: Le caractère n'apparaît pas, la sélection est déplacée (un tweet dans la liste sera mis en surbrillance).

Je me suis efforcé de savoir comment la navigation sur le clavier de Twitter est implémentée, mais n'a pas pu trouver d'indications. Pouvez-vous me donner des conseils sur la façon de résoudre ce problème (et éviter des problèmes similaires sur d'autres sites Web)?

L'utilisation d'un iFrame pour l'entrée déclenche d'autres bugs très étranges, donc je veux éviter cela si cela est possible.

• Comment analyser le texte DIV modifiable avec la compatibilité du navigateur
• Le div contentatif perd la sélection lorsqu'une autre entrée se concentre
• Problème détectant Newlines dans JavaScript Range Object
• Alternative d'Internet Explorer à document.execCommand ("insertText", …), pour l'insertion de texte qui peut être annulée par l'utilisateur
• Comment obtenir le décalage de pixel de la position du caret actuel dans un iframe avec du contenuEditable

• HTML / JAVASCRIPT: Disable HTML CONTENT dans contentEditable = true
• Consolider les éléments de mise en forme DOM empilés – DIV contournable
• Définition de la fonction ExecCommand pour gras?
• Existe-t-il un moyen de garder execCommand ("insertHTML") de supprimer les attributs dans Chrome?
• CKEditor, widget d'initialisation ajouté avec insertElement