Impression et champs disabled

**le_chomeur** · 07/04/2008, 10h00

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

**SpaceFrog** · 07/04/2008, 10h05

readonly ?

**le_chomeur** · 07/04/2008, 10h33

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

**le_chomeur** · 07/04/2008, 10h52

hum j'me disais aussi :

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
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

**SpaceFrog** · 07/04/2008, 11h22

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

**le_chomeur** · 07/04/2008, 11h29

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 :

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
 
<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 ...

**SpaceFrog** · 07/04/2008, 11h38

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 .

**madevilts** · 07/04/2008, 11h45

Why not

Un peu de doc là :
http://www.alistapart.com/articles/goingtoprint/

**le_chomeur** · 07/04/2008, 11h51

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

**madevilts** · 07/04/2008, 11h56

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.

**le_chomeur** · 07/04/2008, 13h45

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

**madevilts** · 07/04/2008, 14h18

Et si t'es user font clique droit imprimé ou utilise le raccourci clavier ?

**SpaceFrog** · 07/04/2008, 14h50

d'ou le media print

**madevilts** · 07/04/2008, 14h59

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 :

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
<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>

**le_chomeur** · 07/04/2008, 15h18

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 :

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

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

firefox ok , mais ie gris

**SpaceFrog** · 07/04/2008, 15h24

d'où la methode sûre d'avoir un doublon du form masqué qui n'apparait qu'à l'impression ...

**madevilts** · 07/04/2008, 15h31

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.

**SpaceFrog** · 07/04/2008, 15h34

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

Impression et champs disabled

JavaScript

Discussions similaires

Partager

Partager