Focus sur SPAN..

Version imprimable

11/01/2007, 13h54
cerede2000

Focus sur SPAN..

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 :cry:
Alors si quelqu'un a un idée.
Merci
11/01/2007, 14h01
Bisûnûrs

Tu as essayé avec l'attribut tabindex ?
11/01/2007, 14h11
cerede2000

Oui ca ne donne rien :s.
11/01/2007, 14h20
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.
11/01/2007, 15h44
cerede2000

Eu ben je vient de tester et c'est toujours pareille 8O
La page est en ligne.
11/01/2007, 15h48
Eric Berger

Citation:

Envoyé par cerede2000

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

Là tu m'étonnes beaucoup....sur des input tu dois pouvoir te servir de tab sans problème
11/01/2007, 15h58
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.

Ce code seul fonctionne à merveille :

Code:

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.

11/01/2007, 17h50
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?
11/01/2007, 17h52
MasterOfChakhaL

peut-être dans un fieldset?
11/01/2007, 17h54
cerede2000

Hum non :cry: même probleme en faite des que je met les INPUT dans un conteneur ca ne fonctionne plus :?
11/01/2007, 17h57
MasterOfChakhaL
re,

j'ai vu ca dans ton code:
Code:

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:

cursor: pointer;

http://www.w3schools.com/css/pr_class_cursor.asp
11/01/2007, 18h00
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!
11/01/2007, 18h25
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...
11/01/2007, 19h04
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:

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

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:

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>

11/01/2007, 19h51
cerede2000

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