Comment capturer et ajouter des touches à un élément div en temps réel?

Dans le code suivant, j'essaie d'obtenir les touches et de l'ajouter à mon élément div. Par exemple: si j'appuie sur des touches aléatoires telles que "fhjbfwjbj", il faut l'ajouter au texte de div. :Comment capturer et ajouter des touches à un élément div en temps réel?

<script> 
function type() 
    { 
     var edit = document.getElementById("add"); 
     edit.innerHTML=edit.innerHTML + //WHAT TO ADD?????; 
    } 
</script> 

<body onkeypress="type()"> 
<div id="add" style="position:relative; left:600px; top:170px;"> 

Add to this text 

</div> 
</body>

Source

2015-10-07 Devansh Bansal

une raison quelconque vous n'utilisez pas un cadre comme jQuery pour cela? –

Mettez 'console.log (arguments)' à l'intérieur de la fonction et voyez ce que le navigateur envoie à votre méthode. Tu ne peux pas juste rendre le contenu div modifiable? – epascarello

Quelque chose comme ceci:

document.body.onkeypress = function(evt) { 
    var edit = document.getElementById("add"); 
    edit.innerHTML=edit.innerHTML + String.fromCharCode(evt.which || evt.keyCode); 
}

Source

2015-10-07 15:03:46

Cela vous donnera des caractères étranges pour les touches comme la 'clé et ils seront tous en majuscules. – www139

Vraiment? Je suis en train de tester sur ma console en ce moment, et les caractères alphanumériques semblent fonctionner, sans conversion en majuscules. –

C'est ce qu'il a fait pour moi dans le passé quand je l'ai fait; pensé qu'il le ferait pour vous. Quel navigateur utilisez-vous? – www139

changement onkeypress à onKeyUp (c'est juste une question de préférence, cependant) et votre fonction devrait prendre dans un cas par exemple arg function type(evt) et la clé sera dans la propriété keyCode, c'est-à-dire evt.keyCode.

Source

2015-10-07 15:02:16 kasia

Comment capturer et ajouter des touches à un élément div en temps réel?

Répondre

Questions connexes