[JavaScript] - Afficher le contenu d\'un input

tcho_i_er

Afficher le contenu d'un input

Pour afficher le contenu d'un input en javascript, c'est très simple !

Avec un peu de jugotte, de logique et de réflexion, le js devient un jeu d'enfant !..

Il faut dabord réfléchir au but premier :

"Je veut afficher le contenu de l'input dans lequel le client écrit"

on aura donc besoin en premier temp d'un input ..

Je vais pas faire un tuto sur les formulaires, si vous ne connaissez rien au Html, vous ne comprendrez pas grand chose.

Voila donc un formulaire basique contenant un input :

Code:

Comme nous aurons besoin de l'input, nous allons lui donner une identitée, sinon JS ne saura jamais de quel input je parle !
Je vais donc lui attribuer une ID :

Code:

Nous avons donc attribué une ID à cet input, histoire que JS le repère dans la masse ..

Et maintenant ?

Eh bien maintenant il manque encore une seule chose en html .. Nous avons certes placé une texte-box, mais on veut aussi afficher le texte de cette texte-box, nous allons donc en quelque-sorte "reserver" une petite place pour l'affichage, en utilisant les balises "SPAN", il faut aussi attribuer une ID unique à cette nouvelle paire de balise.

Au final, niveau html nous nous retrouveront avec :

Code:

Et voila, nous avons tout ce qu'il nous faut coté HTML ! quoi-que, il reste encore une minuscule chose, mais nous verrons cela par la suite !

Maintenant, que faire ? Comment dynamiser tout cela ! Eh bien grâce au javascript pardi ! (comme si on ne s'y attendait pas ! ...)

Personellement, je crée ma propre fonction, c'est plus présentable niveau programmation, et c'est surtout plus simple ..

Mais dabord, il faut crée une sorte de "zone de travail" pour le javascript, il existe pour ce faire une balise "script" qui permet de dire au navigateur qu'entre ces deux balise un script est présent .. (le javascript se met entre les balise "HEAD")

Concrètement on obtiens cela :

Code:

ne faites pas attention au charabia, ne faites attention qu'à cela :

Code:

remarquer que j'ai mis l'attribu "javascript" à "language", pour bien lui faire comprendre que c'est du JAVAscript ..

et maintenant que nous avons cette "zone de travail", nous pouvons désormais créer notre fonction.

Le nom que vous lui donnerez n'a pas d'importante .. mais faites tout de même attention aux constantes, etc ..

Code:

C'est maintenant que le codage entre en action .. On veut recupèrer le texte de l'input dans une variable, et ce pour l'afficher entre les balise "SPAN" précédemment mise. Il faut donc déclarer une nouvelle variable :

Code:

Ensuite il faut assigner à cette variable une valeur .. Cette valeur sera le contenu de l'input.

Voila donc la ligne complète qui permet de recuperer la valeur de l'input dans la variable "contenu" :

Code:

contenu=document.getElementById('INPUT1').value;

En décomposant, l'objet "document" permet d'intéragir avec le formulaire, c'est la base pour commencer à recupèrer la valeur.

"getElementById" permet d'obtenir comme son nom l'indique un element selon son ID (d'ou l'interêt de mettre une ID à l'input d'avant ! ), et "value" , je pense que vous le comprendrez, c'est pour dire qu'on veut la "valeur" .

En francais pseudo-correct cela nous donne :

contenu = valeur de INPUT1

(on comprend déjà mieu vu comme sa noel

)

Maintenant qu'on a cette valeur, on l'attribu à la balise SPAN , voici l'art et la manière :

Code:

document.getElementById('affiche').innerHTML=contenu;

c'est le même principe, sauf que cette fois on attribu à un document la valeur précédemment transmise !

innerHTML signifi "Contenu HTML", en français une nouvelle fois cela nous donne :

Contenu html de "affiche" = contenu

tout semble parfait non ? Eh bien ce n'est pas le cas, vous pourrez toujours essayer, cela ne marchera jamais.. Car il faut déclarer que l'on utilise la fonction ! Pour ce faire, nous allons attribuer un évènement à l'input qui va déclencher la fonction :

L'évènement : onKeyUp (donc dès qu'une touche est relachée)

On en revient à notre HTML ou l'on va ajouter l'évènement :

Code:

Et voila le travail ! Désormais dès qu'une touche est relaché sur l'input, la fonction tourne ! ce qui vous fera un joli affichage de texte dynamique !

Voila la source entière :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title> GMZ </title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />




   <script language="javascript" >
   var contenu;

   function change()
   {

   contenu=document.getElementById('INPUT1').value;

   document.getElementById('affiche').innerHTML=contenu;

   }

   </script>

</head>

<body>
<br/>

<p>

<strong style="color:red;">Afficher Input </strong><br/> <em>par tcho_i_er </em>
<br/>
<br/>
<form method="POST" action="#" >
<strong>Tapez votre texte :<br/><br/>
<input type="text" id="INPUT1" onKeyUp="change()" />
</form>
<br/>
Texte contenu dans l'input :</strong> <span id="affiche" > </span>

</p>

</body>

</html>

_________________
Jungle wa itsumo Hale nochi Guu

ombre

Super tutoriel pour commencer l'apprentissage du javascript !

_________________
<!--

--><center><a href="http://www.laquadrature.net/HADOPI" title="HADOPI - Le Net en France : black-out"><img src="http://media.laquadrature.net/Quadrature_black-out_HADOPI_468x60px.gif" border="0" alt="HADOPI - Le Net en France : black-out" /></a></center>

gamesix

oua cool merci beau tutorial

n'hesite pas a en reposter

_________________
<a href=http://www.maxofcash.com?refer=2318 target=blank><img src=http://www.maxofcash.com/maxofcash_bann.gif></a>
Si vous vous inscrivez (et même seulement si vous vous inscrivez ) vous aurrez un petit cadeau