web-dev-qa-db-fra.com

Lors de la saisie dans un champ de saisie de texte, l’impression du contenu saisi dans un fichier div

J'ai un site Web où il y a une zone vide et une zone de texte de saisie. Je veux être capable de taper quelque chose dans cette zone de saisie et de l’imprimer sur la case vide.

HTML

<div class='printchatbox'></div>

qui est la boîte vide et

<input type='text' name='fname' class='chatinput'>

qui est la zone de saisie.

CSS

.printchatbox 
    {border-width:thick 10px;border-style: solid; 
    background-color:#fff;
    line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
    border: 3px solid #969293;width:40%;}

Si quelqu'un pouvait me dire comment faire cela, je l'apprécierais grandement. Merci

javascripthtmlcssinput
10
ctm

Vous utilisez l'événement onkeyup

Rechercher avec des identifiants est beaucoup plus facile. Ajoutez des identifiants à vos éléments comme suit:

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' id='chatinput'>

JS

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function(){
    document.getElementById('printchatbox').innerHTML = inputBox.value;
}

Voici un exemple Live

26
nunespascal

http://jsfiddle.net/3kpay/

<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />
2
codingbiz

Il y a plusieurs façons de le faire, le plus simple étant d'utiliser jQuery. Dans l'exemple ci-dessous, j'utilise la fonction jQuery keyUp() pour écouter les événements de clavier, puis j'écris la valeur mise à jour dans le .printChatBox.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>

  <div class='printchatbox'>CHANGE ME</div>
  <input type='text' name='fname' class='chatinput'>

<script type="script/javascript">
  $('.chatinput').keyup(function(event) {
    newText = event.target.value;
    $('.printchatbox').text(newText);
  });
</script>
</body>
</html>

J'ai posté un exemple de travail ici: http://jsbin.com/axibuw/1/edit

2
Mike Grassotti

Dans votre HTML,

<div id='printchatbox'></div>
<br>
<input type='text' id='fname' class='chatinput' onkeyup="annotate()">

En JS,

function annotate(){
  var typed= document.getElementById("fname").value;
  document.getElementById("printchatbox").innerHTML= typed;
}

Cliquez ici pour LIVE DEMO

1
Ritam Das