Ajouter des séquences de touches à div JS

Question

Je me demandais quel cadre, le cas échéant, serait le meilleur pour réaliser des frappes de frappe et les ajouter à, disons un élément "p". Ce que j'essaye de réaliser est d'avoir le type de client quelque chose sur le clavier, et ai alors cette phrase ou n'importe quoi, ajouté au HTML, l'exposant ici dans l'élément de "p".

Avis important; Je n'essaie pas d'appeler une fonction à une pression de touche donnée - ex. shift + alt, plutôt ce que j'essaie de faire est, en streaming le keyboardstrokes à un élément html.

Answer 1

Vous n'avez pas nécessairement besoin d'un framework pour cette tâche. Une autre option possiblement viable en dehors de Kai Christensen serait de créer une zone de texte en dehors de la zone d'écran visible, de mettre automatiquement l'accent sur cette zone de texte et de créer un écouteur de modification pour la zone de texte.

Vous pouvez ensuite simplement remplacer le contenu de l'élément cible par le contenu de la zone de texte chaque fois qu'il change.

Cela vous évite la peine d'écouter les événements du clavier manuellement, en distinguant les lettres majuscules et minuscules, etc.

Answer 2

Je voudrais certainement aller avec jQuery pour capturer les clés et puis constamment .replace() votre div avec un div avec les mêmes propriétés qui contient la dernière version de la chaîne de mise à jour. Codecademy a un grand ensemble de leçons pour ce type d'utilisation jQuery.

Mais je ne suis pas un expert. Je suis sûr que quelqu'un d'autre a une meilleure réponse que la mienne.

Answer 3

quelque chose comme ça?

Html

<p id="text"></p> 
<input id="textinput"></input> 

Js

//Register on keyup, append text from input-field to <p> element. 
window.addEventListener("keyup", function() { 
    document.getElementById("text").innerHTML=document.getElementById('textinput').value; 
}); 

jsFiddle: https://jsfiddle.net/vwobq9xf/1/