Discussion :

[cerede2000]

Bonjour,
Voila je développe un système, qui transforme un SPAN ou autre en un INPUT pour le rendre éditable.
Voici la page: http://bbjess.free.fr/dev/chd.html
Et mon problème c'est que je voudrai qu'on puisse se déplacé sur les différent champs avec le touche tab.
J'ai essayer avec des A mais ca ne fonctionne pas
Alors si quelqu'un a un idée.
Merci

[Bisûnûrs]

Tu as essayé avec l'attribut tabindex ?

[cerede2000]

Oui ca ne donne rien :s.

[Bisûnûrs]

Tu peux procéder de manière différente, non pas de créer un input dynamiquement sur le onclick, mais de simplement changer l'apparence du input.

Par défaut il est en readonly et sans bordure et sur le focus il a une bordure et n'est plus en readonly.

Là les tabindex fonctionneront.

[cerede2000]

Eu ben je vient de tester et c'est toujours pareille
La page est en ligne.

[Eric Berger]

Eu ben je vient de tester et c'est toujours pareille
La page est en ligne.

Là tu m'étonnes beaucoup....sur des input tu dois pouvoir te servir de tab sans problème

[cerede2000]

Ben c'est en ligne vous pouvez essayer
J'ai essayer avec et sans les <a> et c'est la meme chose.
Pourtant il y a bien les tabindex.

[Bisûnûrs]

Ce code seul fonctionne à merveille :

Code :

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

1
2
3
4
<input tabindex="1" type="text" value="Mr Dupont" />
<input tabindex="2" type="text" value="Marc" readonly="readonly" />
<input tabindex="3" type="text" value="15 allée des oliviers" readonly="readonly" />
<input tabindex="4" type="text" value="44000" readonly="readonly" />

Ton problème vient donc d'autre part.

[cerede2000]

Effectivement le probleme vient du faite que mes INPUT soit dans des DIV.
Mais pourtant je suis oblige de les mettre dans un conteneur.
Une solution?

[MasterOfChakhaL]

peut-être dans un fieldset?

[cerede2000]

Hum non même probleme en faite des que je met les INPUT dans un conteneur ca ne fonctionne plus

[MasterOfChakhaL]

re,

j'ai vu ca dans ton code:

Code :

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

1
2
3
4
5
<a href="#" tabindex="1">
		<div id="contient_1">
			<input tabindex="1" id="1" type="text" value="Mr Dupont" onfocus="ChangeTag('1');" readonly style="border: 0;">
		</div>
	</a>

Les tabindex sont sensés être unique. De plus, tes liens ne semblent servir à rien.
Si c'est juste pour avoir le curseur en forme de main, tu as la propriété css

Code css :

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

cursor: pointer;

http://www.w3schools.com/css/pr_class_cursor.asp

[cerede2000]

Oui je sait les tabindex sont unique, c'était un essai j'ai corrigé mais cela ne change rien.
Je met a jour la page
Edit: La c'est avec les fieldset.
Edit2: Et le liens permettait de faire que quand on cliquait sur un autre INPUT c'etait immediat alors que la il faut cliquer 2 fois!

[MasterOfChakhaL]

Salut,

Il y a quand même beaucoup d'incorrection dans ton code, ca doit pas aider.

Les a ne sont pas sensés contenir d'élément block (vu l'usage que tu en fait, tu peux tout a fait remplacer tes div par des span ).
Les attributs id ne doivent pas commencer par une valeur numérique.
Comme déjà dit tu ne peux pas dupliquer tes tabindex.

Si tu corrigeais ces erreurs, tu aurais certainement moins de problème...

[cerede2000]

Alors j'ai corrige ce qui as été dit. Ca fonctionne mieux.
Reste deux soucis, c'est qu'une fois qu'on a parcourus tout les INPUT il reste sur le premier
Et ensuite comment faire pour que l'édition soit immédiate la vous remarquerez qu'elle se fait au deuxième appui sur la touche tab.
Merci

Edit: Je pecise que j'ai essayer tout ceci:

Code :

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

onfocus="ChangeTag('a4');" onblur="ChangeTag('a4');" onselect="ChangeTag('a4');"

[MasterOfChakhaL]

re,

J'ai regardé un peu plus en détail ce que tu voulais faire.
J'ai l'impression que tu te prends la tête pour pas grand chose finalement.

Tu pourrais t'inspirer de cela je crois

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
21
22
23
24
25
26
27
28
29
<!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">
<head>
<title>
	Test a la YO-staiile
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
	<style>
        input {
                border: none;
        }
 
        input.editable {
                border: 1px solid red;
        }
        </style>
 
</head>
<body>
 
	<form action="#" method="post" >
		<fieldset>
			<input type="text" value="john" onfocus="this.className='editable'" onblur="this.className=''" />
			<input type="text" value="smith" onfocus="this.className='editable'" onblur="this.className=''" />
			<input type="submit" value="enregistrer" />
		</fieldset>
	</form>
</body>
</html>

[cerede2000]

Effectivement je n'avai pas penser a ca!
Merci beaucoup