Discussion :

[iceman2001]

Bonjour à tous,

J'essaie d'utiliser dans une source ce clavier virtuel là :

http://net.tutsplus.com/tutorials/ja...ss-and-jquery/

Je souhaite évidemment ne pas écrire dans le textarea par défaut que j'ai fait sauté mais dans un formulaire HTML. Le but étant, vous l'aurez compris, d'écrire dans le champs qui détient le focus (ce qui représente deux champs possible : Nom et Commentaire)

Dans mon Saisie.html, voici ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<form id="form2" method="post" action="envoi.php">	
	<label for="Nom">Nom</label> 
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="text" name="nom" id="nom" onFocus="GetIDFocus(this.id);" onBlur="NoFocusID()"; size="47"/>
	<BR><BR>
<textarea name="commentaire" cols="47" rows="10" id="commentaire" onFocus="GetIDFocus(this.id)"; onBlur="NoFocusID()";></textarea>
	<BR><BR><BR>	
            <INPUT TYPE=submit Name="BTN_VALIDER" VALUE="Valider le formulaire">
<script language="JavaScript">
 
     var VarFocusID;
     function GetIDFocus(MaVarFocus)
     {
          VarFocusID = MaVarFocus;		 			  
     }
     function NoFocusID()
     {
          VarFocusID = '';		
     }

A ce niveau pas de souci, je récupère bien dans ma variable VarFocusID l'ID du champs en cours de séléction.

Mon souci vient du script keyboard.js.......qui débute ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;
 
	$('#keyboard li').click(function(){
		alert(VarFocusID);		
		var $this = $(document.getElementById(VarFocusID));
			character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
		alert($this);
		// Shift keys
		if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();
 
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		}

Mon alert(VarFocusID); me renvoie bien l'ID du champ sélectionné.
Par contre, mon alert($this); me renvoie [Object object].
Et je pense qu'il y a forcément quelquechose que je n'ai pas pigé.

Si vous avez une piste, je suis preneur.

D'avance merci.

[iceman2001]

En fait, en bas du script keyboard.js, il y a cette fonction pour ajouter le texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$write.html($write.html() + character);

Or comme quand on entre dans la page saisie.html, le code suivant est exécuté (toujours dans le keyboard.js) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$(function(){
	var $write = $('#write'),
		shift = false,
		capslock = false;

Il faut que je trouve le moyen que $write = $('#commentaire') ou $('#nom') selon le cas, au moment où on clique sur une touche.....
Et c'est là que je sèche.

[iceman2001]

Au final, j'ai réussi !!!!!!!!
Il semblerait que le clavier ne fonctionne pas sur un champs texte.
J'ai donc remplacé dans mon formulaire mon champs texte par un textarea de 1 ligne et 60 colonnes....et ça marche.

Par contre, je suis intéressé pour savoir pourquoi ça ne marche pas sur un champ text. Problème avec le onFocus ?

Ceci dit, Voici le code si celà peut aider certains :

Formulaire (Saisie.html) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<form name="form2" id="form2" method="post" action="envoi.php" onsubmit="return verif();">	
	<label for="Nom">Nom</label> 
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<textarea name="nom" cols="60" rows="1" id="nom" onFocus="GetIDFocus(this.id)"; onBlur="NoFocusID()";></textarea>
	<BR><BR>
	<label for="Commentaire">Commentaire</label>
	<BR><BR>
	<textarea name="commentaire" cols="47" rows="10" id="commentaire" onFocus="GetIDFocus(this.id)"; onBlur="NoFocusID()";></textarea>
etc.....etc....

Functions dans Saisie.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
	<script language="JavaScript">	
		function GetIDFocus(MaVarFocus)
		{
			 VarFocusID = MaVarFocus;		 			  
		}
 
		function NoFocusID()
		{
		     $VarFocusID = '';		
		}	
		</script>

Enfin Keyboard.js, uniquement commencer le code par celà (sans rien changer d'autre)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
$(function(){			
	$('#keyboard li').click(function(){
			var $write = $('#'+VarFocusID),
					shift = false,
					capslock = false;
 
		var $this = $(this),