Erreur d'un select() dans un input

Version imprimable

Bonjour,

je mettre au chargement de la page le curseur de la souris dans le seul champ input de ma page.
J'ai bien utiliser le code utiliser généralement, cependant dans ma page je charge un pdf et lors du chargement il prend le focus du champs. c'est frustrant je voudrai qu'une fois charger le focus soit dans mon input qu'il n'y ai plus qu'a taper.

je vous met le code ici :

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
 
<body onload="document.getElementById('NumBl').select()">
		<div class="head">
			<table class="header">
				<tr>
					<td  class="header" width='50%'><img src='./images/logo_otec.jpg' alt="logo otec" /></td>
					<td  class="header" width='50%'><img src='./images/otec3.jpg' alt="picture" id="pic" /></td>
				</tr>
				<tr>
					<td  class="header" colspan='2'>SAISIE DES BONS DE LIVRAISON SCANNES</td>
				</tr>
			</table>
		</div>		
 
		<div class="englobe">
			<div class="menu">
				<h3> Entrer le num&eacute;ro du BL</h3>
 
				<p>
					<form method="post" <?php echo"action='traitement.php?var=".$NameFile."'";?> onsubmit="return ControleChamp()">
					<label>Num&eacute;ro BL</label> : <input id='NumBl' type="text" name="NumBl" onKeydown="MasqueSaisie();"/><br/><br/>
 
 
					<input type="submit" value="Valider" /><br/>
					</form>
				</p><br/><br/>
 
				<input type="button" value="Exit" onclick="window.close();" /><br/><br/><br/><br/>
				<img src='./images/logo_snew.jpg' alt="logo snew" /><br/>
 
				<p>
					T&eacute;l: 01 41 74 95 34
				</p><br/><br/><br/>
 
				<img class="camion" src='./images/transport.jpg' alt="notre r&eacute;seau" /> <br/>
 
			</div>
 
			<div class="body">
				<?php
                                        echo "<iframe src='$Target' width='827' height='900' align='middle'></iframe>";
                                ?>
			</div>
		</div>
 
	</body>

Voila je pense que nous pouvons ruser mais je n'ai pas suffisamment de logique JS.

Merci d'avance

14/03/2012, 15h23
SpaceFrog

focus ...

Code:

document.getElementById('NumBl').focus()

ou si il contient déja une valuer et que tu souhaites te mettre à la fin :

Code:

document.getElementById('NumBl').value=document.getElementById('NumBl').value
14/03/2012, 18h20
darkterreur
Bonsoir,

alors j'ai tester avec ceci
Code:

1 2 <body onload="document.getElementById('NumBl').focus()">
Cela me fait la meme chose qu'avec le select()
je voit le curseur dans le input puis le pdf fini de ce charger et hop je perd le curseur de mon champs.

Je précise que le champs dois etre remplit a la mains j'espere que cela repond a ceci

Citation:

ou si il contient déja une valuer et que tu souhaites te mettre à la fin :

Code :Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementById('NumBl').value=document.getElementById('NumBl').value

je vous remercie par avance.
15/03/2012, 08h48
SpaceFrog

Désolé je n'ai pas compris (et ne comprends toujours pas l'ergonomie recherchée ...
15/03/2012, 09h32
darkterreur

Désolé je ne suis peut être pas suffisamment clair. Je vais essayer d'y remédier.

donc il s'agit d'une application permettant de parcourir un a un un ensemble de PDF. Vous pouvez voir dans le code, il y a un lecteur qui affiche le PDF, nous en avons besoin pour lire le contenu et saisie dans le input ce qui a été lu.

Ensuite en découle un traitement puis, nous rechargeons la page avec un nouveau PDF et ainsi de suite.

Seulement, il s'agit de plusieurs centaine de PDF par jours, donc la personne qui saisit doit a chaque replacer le curseur dans le input pour saisie ce qu'elle doit. J'ai donc essayé les bout de code que vous avez vu ci-dessus. Seulement quand je fait mes test, je voit le curseur apparaître dans le input puis disparaître lorsque le PDF a fini de charger.

En gros le chargement du PDF vole le focus, et viens donc après le code placé dans le onload du body.

Donc y a t'il possibilité de déclencher l’évènement une fois le PDF chargé?

J’espère avoir été suffisamment clair.
15/03/2012, 09h47
Bovino
Citation:

J’espère avoir été suffisamment clair.

Pour être franc, je ne suis pas sûr que tous tes mots soient dans le bon ordre ! :aie:
:pastaper:

Bref, tu peux essayer de rajouter un id à ton iframe ("pdfFrame" dans mon exemple) et d'ajouter :
Code:

1 2 3 document.getElementById('pdfFrame').onload = function(){ document.getElementById('NumBl').focus(); }

Bonjour,

je suis désolé mais cela ne fonctionne pas
je met les bout de code modifié des fois que je me soit trompé :)
Code:

1 2 <body onload="document.getElementById('pdfFrame').onload = function(){ document.getElementById('NumBl').focus();}">
Code:

1 2 3 4 <?php echo "<iframe id='pdfFrame' src='$Target' width='827' height='900' align='middle'></iframe>"; ?>
voila

15/03/2012, 12h01
Bovino

As-tu fait attention à l'imbrication des quotes ? C'est facilement vérifiable en regardant le code source généré dans le navigateur.

Sinon :

Code:

<iframe id='pdfFrame' src='$Target' width='827' height='900' align='middle' onload='document.getElementById(\'NumBl\').focus();'></iframe>

?

Et si ça ne marche pas, essaye

Code:

<iframe id='pdfFrame' src='$Target' width='827' height='900' align='middle' onload='alert(\'foo\');'></iframe>

pour voir ce qu'il y a dans l'iframe au moment de l'alert...

Alors je n'ai pas vu d'erreur particulière avec les quotes.

j'ai tester ces deux code la :
Code:

1 2 <iframe id='pdfFrame' src='$Target' width='827' height='900' align='middle' onload=\"document.getElementById('NumBl').focus();\"></iframe>
Code:

1 2 <iframe id='pdfFrame' src='$Target' width='827' height='900' align='middle' onload=\"alert('foo');\"></iframe>
J'avais des erreurs avec ta syntaxe.
Bref j'ai toujours rien même pas de alert() étrange.

15/03/2012, 16h30
Bovino

Tu peux montrer le code HTML généré ? (CTRL + U dans Firefox)

voila, je précise que c'est pour IE au cas ou ...

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf -8" />
		<link rel="stylesheet" href="otec2.css" />
		<title>OTEC's Project</title>
		<script language="JavaScript1.2" src="masks.js"></script>
	</head>
 
<script language="javascript"> 
 
	function $(monID){
		return document.getElementById(monID);
	}
 
	function FocusChargement(){
		$('NumBl').focus();
	}
 
	function MasqueSaisie(){
		oEuroMask = new Mask("## # ## #* ### ##", "string");
		oEuroMask.attach($('NumBl'));
	}
 
	function ControleChamp(){
		var elem = $('NumBl');
		var regex = /[0-9]{2}\s\d\s[0-9]{2}\s\d\w\s[0-9]{3}\s[0-9]{2}/;
		if(regex.test(elem.value))
		{
			return true;
		}
		else
		{
			elem.style.borderColor="red";
			return false;
		}
	}
 
</script>
	<body >
		<div class="head">
			<table class="header">
				<tr>
					<td  class="header" width='50%'><img src='./images/logo_otec.jpg' alt="logo otec" /></td>
					<td  class="header" width='50%'><img src='./images/otec3.jpg' alt="picture" id="pic" /></td>
				</tr>
				<tr>
					<td  class="header" colspan='2'>SAISIE DES BONS DE LIVRAISON SCANNES</td>
				</tr>
			</table>
		</div>
 
 
	<!--	<div class="head">
			<p class="logo">
				<img src='./images/logo_otec.jpg' alt="logo otec" />
			</p>
			<p class="head_pic"> 
				<img src='./images/otec3.jpg' alt="picture" id="pic" />
			</p>
			<p class="head_text">
				SAISIE DES BONS DE LIVRAISON SCANNES
			</p>
		</div> -->
 
 
		<div class="englobe">
			<div class="menu">
				<h3> Entrer le num&eacute;ro du BL</h3>
 
				<p>
					<form method="post" action='traitement.php?var=Copie de bl - 10.pdf' onsubmit="return ControleChamp()">
					<label>Num&eacute;ro BL</label> : <input id='NumBl' type="text" name="NumBl" onKeydown="MasqueSaisie();"/><br/><br/>
 
 
					<input type="submit" value="Valider" /><br/>
					</form>
				</p><br/><br/>
 
				<input type="button" value="Exit" onclick="window.close();" /><br/><br/><br/><br/>
				<img src='./images/logo_snew.jpg' alt="logo snew" /><br/>
 
				<p>
					T&eacute;l: 01 41 74 95 34
				</p><br/><br/><br/>
 
				<img class="camion" src='./images/transport.jpg' alt="notre r&eacute;seau" /> <br/>
 
			</div>
 
			<div class="body">
				<iframe id='pdfFrame' src='./Temp/Copie de bl - 10.pdf' width='827' height='900' align='middle' onload="alert('foo');"></iframe>			</div>
		</div>
 
	</body>
</html>

15/03/2012, 16h49
SpaceFrog

Code:

<script language="JavaScript1.2"

Tu fais de la paléontologie ???
15/03/2012, 17h00
darkterreur

ha?8O heu non pourquoi ?

je suppose que c'est une vieille version?:mouarf:
15/03/2012, 17h04
Bovino

:fleche: Comprendre la balise script

D'autre part, ton autre balise <script> doit se trouver soit dans le <head> soit dans le <body> mais certainement pas entre les deux.

Mettre des espaces dans le nom de fichier appelé, c'est un peu se compliquer la vie...

A part ça, je viens de faire un test rapide et le

Code:

<body onload="document.getElementById('NumBl').focus()">

fonctionne parfaitement...
15/03/2012, 17h27
darkterreur

d'accord tu peux me donner un exemple que je voit ?
ou doivent etre mes balisent <script> et de quelle fichier parle tu?

et quelle version dois je utiliser pour le JS?

ha je n'avais pas vu le liens je regarde de suite désolé

merci d'avance
15/03/2012, 17h39
Bovino

:fleche: http://dmouronval.developpez.com/iframe.html
15/03/2012, 18h05
darkterreur

merci pour ce nouveau lien mais petite question, y a t'il un rapport entre ma balise iframe et l'ajax ? je suppose que tu ne ma pas donné ce liens par hasard mais j'ai du mal a comprend.
Je vais le lire pour demain.

Donc si je comprend bien je dois changer "langage" part "type" mais dois je annoncé la version? c'est pas précisé dans le doc.

De plus mes balises <script> doivent t'elle être a la fin de mon </body> ?

Apres j'ai vu les espaces dans le src du ifame il s'agit d'une version test et il s'agit d'un pdf dupliqué plusieurs fois c'est supercopieur qui lui a donné son nom, mais en production il n'y a pas d'espace dans le nom. C'étais bien de ces espaces la dont tu me parlais?
15/03/2012, 18h32
Bovino

Citation:

y a t'il un rapport entre ma balise iframe et l'ajax ?

Non, c'était juste pour mettre un pdf dans l'iframe ! :)

Citation:

Donc si je comprend bien je dois changer "langage" part "type" mais dois je annoncé la version? c'est pas précisé dans le doc.

L'attribut type correspond à un type mime, pas à une version (dont on se fout éperduement : la version idéale est la dernière mise à disposition par le navigateur).

Citation:

De plus mes balises <script> doivent t'elle être a la fin de mon </body> ?

Ben là, ça dépend des scripts... :aie:

Bonjour,

Je dois avouer que j'ai eu du mal avec le lien concernant le iframe et le pdf ajax.

Finalement j'ai compris et effectivement ton exemple fonctionne. Mais chez moi c'est un peu plus compliqué.

Bon j'ai fait quelque modification et je les poste ici.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
<?php
        include('./config.php');
        
        $NameFile = htmlentities($_GET['var']);
        if(!empty($NameFile))
        {       
                $Target = $repTemp.$NameFile;
        }
        else
        {
                $Target = "./Page_de_garde.pdf";
        }
        
?>
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf -8" />
		<link rel="stylesheet" href="otec2.css" />
		<title>OTEC's Project</title>
		<script type="text/javascript" src="masks.js"></script>
 
		<script type="text/javascript">
 
			function $(monID){
				return document.getElementById(monID);
			}
 
			function MasqueSaisie(){
				oEuroMask = new Mask("## # ## #* ### ##", "string");
				oEuroMask.attach($('NumBl'));
			}
 
			function ControleChamp(){
				var elem = $('NumBl');
				var regex = /[0-9]{2}\s\d\s[0-9]{2}\s\d\w\s[0-9]{3}\s[0-9]{2}/;
				if(regex.test(elem.value))
				{
					return true;
				}
				else
				{
					elem.style.borderColor="red";
					return false;
				}
			}
 
		</script>
	</head>
 
 
	<body onload="document.getElementById('NumBl').focus();">
		<div class="head">
			<table class="header">
				<tr>
					<td  class="header" width='50%'><img src='./images/logo_otec.jpg' alt="logo otec" /></td>
					<td  class="header" width='50%'><img src='./images/otec3.jpg' alt="picture" id="pic" /></td>
				</tr>
				<tr>
					<td  class="header" colspan='2'>SAISIE DES BONS DE LIVRAISON SCANNES</td>
				</tr>
			</table>
		</div>
 
 
	<!--	<div class="head">
			<p class="logo">
				<img src='./images/logo_otec.jpg' alt="logo otec" />
			</p>
			<p class="head_pic"> 
				<img src='./images/otec3.jpg' alt="picture" id="pic" />
			</p>
			<p class="head_text">
				SAISIE DES BONS DE LIVRAISON SCANNES
			</p>
		</div> -->
 
 
		<div class="englobe">
			<div class="menu">
				<h3> Entrer le num&eacute;ro du BL</h3>
 
				<p>
					<form method="post" <?php echo"action='traitement.php?var=".$NameFile."'";?> onsubmit="return ControleChamp()">
					<label>Num&eacute;ro BL</label> : <input id='NumBl' type="text" name="NumBl" onKeydown="MasqueSaisie();"/><br/><br/>
 
 
					<input type="submit" value="Valider" /><br/>
					</form>
				</p><br/><br/>
 
				<input type="button" value="Exit" onclick="window.close();" /><br/><br/><br/><br/>
				<img src='./images/logo_snew.jpg' alt="logo snew" /><br/>
 
				<p>
					T&eacute;l: 01 41 74 95 34
				</p><br/><br/><br/>
 
				<img class="camion" src='./images/transport.jpg' alt="notre r&eacute;seau" /> <br/>
 
			</div>
 
			<div class="body">
				<?php
                                        echo "<iframe src='$Target' width='827' height='900' align='middle'></iframe>";
                                ?>
			</div>
		</div>
 
	</body>
</html>

J'ai esayé de placer mon code en fin de body il refuse.
Le probleme est que au premier chargement cela fonctionne puis au second cela ne fonctionne plus mais je n'ai pas d'erreur.

A savoir que je passe par une premiere page php qui prend le premier pdf d'une longue ligné, et me le déplace dans un dossier temporaire puis envoi a la page dont le code est affiché avec le nom du pdf en variable get.

Une fois la saisie effectué, je suis dirigé vers une page de traitement qui renome, déplace fait des copies, et rappel la premiere page pour reprendre un autre pdf.

Techniquement rien ne change et pourtant au second chargement je n'ai pas mon focus. Frustrant. une idée?

Bon si cela peut aider j'ai une autre fonction que j'appelle normalement avec le onload du body.

Code:

1
2
 
	<body onload="MasqueSaisie();document.getElementById('NumBl').focus();">

cela me permet d'appliquer un masque de saisie sur le champs input mais vous l'avez comprit. Quand je test maintenant que j'ai un semblant des fonctionnement, cela se passe bien au premier chargement super!!!
Mais au second c'est la catastrophe j'ai ceci comme erreur JS dans IE

Code:

1
2
3
4
5
'document.frmExample.erreur' a la valeur Null ou n'est pas un objet.
 
masks.js
ligne : 92
caractere : 2

A savoir que si j'applique uniquement le masque de saisie j'ai pas de problème, je suppose donc que cela a un rapport.

Pourquoi faire simple? une idée ?

19/03/2012, 15h03
darkterreur

Bonjour,

Vous n'avez plus d'idées ?
05/04/2012, 16h23
darkterreur
Bonjour,

je reviens vers vous apres pas mal de test.

Je suis en mesure d'affirmer que de maniere épuré comme l'exemple de Bovino. Cela fonctionne, cependant uniquement dans le onload du body.

le probleme viendrai de mon appel de ma fonction masque de saisie. plus précisement individuellement tout fonctionne. Mais des que j'appel MasqueSaisie(); ainsi que document.getElementById('NumBl').focus();

Je vous passe les détail des différents test mais j'ai tester tout les ordre possible avec des onload de toutes les balise présentes, j'ai meme tester ceci:
Code:

1 2 3 4 5 6 7 function MasqueSaisie(){ document.getElementById('NumBl').focus(); oEuroMask = new Mask("## # ## #* ### ##", "string"); oEuroMask.attach($('NumBl')); }
Je me retrouve a chaque fois avec cette erreur

Citation:

'document.frmtExample.erreur' a la valeur Null ou n'est pas un objet

Et le plus étrange c'est que c'est toujours au deuxième chargement de la page , alors que normalement il n'y a aucune différence.

Très étrange. Je vais surement finir par perdre la boule, ou alors devrais je changer de masque de saisie ? c'est un ensemble de fonction trouvé sur un forum mais j'en ai trouvé qu'un seul...

Je ne sais plus .
29/05/2012, 17h27
darkterreur
Bonsoir,

alors comme il n'y a pas foule de réponse,

je poste quand meme une solution que j'ai trouvé.

j'ai remplacé le iframe, qui visiblement est une vrai saloperie.
Code:

1 2 3 4 <?php echo "<object data='".$Target."' type='text/html' codetype='application/pdf' width='827' height='900'></object>"; ?>
Voila cela fonctionne beaucoup mieux.