Impression et champs disabled

Version imprimable

07/04/2008, 10h00
le_chomeur

Impression et champs disabled

Salut à tous,
j'ai un petit soucie, je cherche à imprimer un document dont tous les champs sont disabled , le hic , c'est que le champs apparait grisé donc a l'impression bof bof ...
il y aurait-il un moyen de retourner false , ou avoir le même comportement sur tous les champs de n'importe quel type de mon formulaire, pour émuler la fonction false ?
je ne peux pas utiliser une div transparente , car cette page a un bouton imprimer ;)
Voila voila :)
07/04/2008, 10h05
SpaceFrog

readonly ?
07/04/2008, 10h33
le_chomeur

:arf:

j'étais tellement focalisé sur l'impression que j'ai homis ça ...
bon on dira que nous somme lundi et j'ai eu un dur we ??? ;)
merci spaffy

hum j'me disais aussi :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="application/javascript">
	function ReadOnlyAll(){
		//On récupère tous les inputs( boutons / checkbox / boutons radio )
		var ListeInput = document.getElementsByTagName("input") ;
		//On récupère tous les textarea
		var ListeTextArea = document.getElementsByTagName("textarea");
		//On récupère les select
		var ListeSelect = document.getElementsByTagName("select");
 
		//Et on traite chacun des objets
		for(var i = 0 , l  = ListeInput.length ; i < l ; i++){
			ListeInput[i].readOnly = true;
		}
 
		for(var i = 0 , l  = ListeTextArea.length ; i < l ; i++){
			ListeTextArea[i].readOnly = true;
		}
 
		for(var i = 0 , l  = ListeSelect.length ; i < l ; i++){
			ListeSelect[i].readOnly = true;
		}
 
	}
	window.onload = function(){ReadOnlyAll()};
</script>
</head>
 
<body>
<input type="text" value="toto" />
<input type="button" value="toto" />
<input type="checkbox" value="toto" />
<input type="radio" value="toto" />
<textarea>
toto
</textarea>
 
<select>
<option>toto</option>
<option>titi</option>
</select>
</body>
</html>

les champs de type select , checkbox et radio , ne prenne pas en compte le readOnly ^o) je vais devoir gerer ça avec un return false je crois...
je posterais le script final ça pourra toujours servir :)

07/04/2008, 11h22
SpaceFrog

ben sinon media print ...
avec un duplicata de ton form ?

cad un "media print", un css d'impression ??
je crois que ça va se finir comme ça ...

le seul hic , c'est que ie ( 7 , je n'ai aps de 6 sous la main) grise quand même le texte des champs txt , de plus j'ai un autre soucie :
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 <input type="text" value="toto" disabled="disabled" style="background-color:#FFFFFF;color:#000000;border:1px solid #000000" /> <input type="checkbox" value="toto" id="test1" /> <input type="checkbox" value="toto" id="test2" /> <select> <option>toto</option> <option>titi</option> </select> <script type="text/javascript"> function addOnclick() { p = document.getElementById("test1"); p.onclick = function(){"alert('arggggg !');"}; } function addOnclick2() { p = document.getElementById("test2"); p.setAttribute("onclick","alert('arggggg')"); } addOnclick2(); addOnclick(); </script>
mon évènement onclick n'est jamais appelé sous ie7 :-/ et sous firefox je dois impérativement passer par un setAttribute ...

07/04/2008, 11h38
SpaceFrog

le media print ne pose pas de souci IE6 ou 7 ...

je ferais un doublon cahcé de ton form ou tout du moins des elements du form dans un div par exemple soit en renseignant les champs sur le lancement du print, soit en faisant un clone node true et en scannant les elements pour modifier le disabled ...

bref plusieurs possibilités .
07/04/2008, 11h45
madevilts

Why not ;)

Un peu de doc là :
http://www.alistapart.com/articles/goingtoprint/
07/04/2008, 11h51
le_chomeur

le problème ne viens pas que de l'impression ;)
il vient aussi du fait que les champs doivent être "disabled" ,
mais a l'écran doivent apparaitre "normaux" pour l'utilisateur , donc readonly est la meilleur solition , mais qqs soucie d'implémentation avec le onclick dynamiquement :roll:
07/04/2008, 11h56
madevilts

Pour les champs DISABLED, fait des readonly ;)
Pour les checkbox, tu les doubles par des images cachés
Les select, tu les doubles par des input que tu caches en 'display:none' et que tu réaffiches à l'impression.

Après tu n'a plus qu'a te faire le petit css qui va bien qui va te cacher les champs de base et les remplacer par les champs cachés ;)

Remarque sinon tu doubles tous tes input et select par des 'span' caché que tu remplis lors du click sur le bouton imprimé et que tu affiches via le media print.
07/04/2008, 13h45
le_chomeur

mouai méthode plutôt lourde ;)

je vais quand même regarder pour faire un script me passant tous mes champs en readonly et renvoyant false pour les select etc :)
07/04/2008, 14h18
madevilts

Et si t'es user font clique droit imprimé ou utilise le raccourci clavier ? :?
07/04/2008, 14h50
SpaceFrog

d'ou le media print ;)

Citation:

Envoyé par SpaceFrog

d'ou le media print ;)

Yes mais j'ai l'impression qu'il parle d'un script qui fait la modif du formulaire lors du clic sur le bouton imprimer dans sa page...

Pour le problème de javascript, il me paraitrait plus propre d'écrire :

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
<html>
  <head>
    <script type="text/javascript">
     function initbouton()
     {
       document.getElementById('test1').onclick = function()
       {
         alert('arg1');
       }
       document.getElementById('test2').onclick = function()
       {
         alert('arg1');
       }
     }
    </script>
  </head>
  <body onload="initbouton();">
    <input type="text" value="toto" disabled="disabled" style="background-color:#FFFFFF;color:#000000;border:1px solid #000000" />
    <input type="checkbox" value="toto" id="test1" />
    <input type="checkbox" value="toto" id="test2" />
 
    <select>
      <option>toto</option>
      <option>titi</option>
    </select>
  </body>
</html>

07/04/2008, 15h18
le_chomeur

Non , au moment du load pas au moment du click , car la page doit apparaitre , non modifiable par l'utilisateur ...
la solution la plus simple serait un disabled + css :)
mais ie laisse grisé les champs texte quelque sois le style , j'ai essayé :

Code:

<input type="text" value="toto" disabled="disabled" style="color:#000000" />

firefox ok , mais ie gris :(
07/04/2008, 15h24
SpaceFrog

d'où la methode sûre d'avoir un doublon du form masqué qui n'apparait qu'à l'impression ...
07/04/2008, 15h31
madevilts

Exact pour le disabled, il est impossible de changer la couleur du texte sur IE7 (ou inférieur). D'ou l'interet du Readonly mais comme l'a dit Spac' doubler le form me parait vraiment le plus simple.
07/04/2008, 15h34
SpaceFrog

Assez lourd certes ... quoi qu'au niveau du code un gros copier coller ...
mais tellement plus sûr !