Jquery et focus()

Version imprimable

Jquery et focus()

Bonsoir,

J'ai un code que j'avais déjà présenté, le problème étant un incompatibilité d'une bibliothèque mask avec pas mal de fonction ainsi que le focus.

je suis donc passé a jquery. très sympa cependant je rencontre toujours un problème. Je n'arrive pas avoir un focus a chaque chargement de page. Mon iframe prend le dessus.
J'ai même essayé d’appeler une fonction a la fin du chargement avec un alert dedans, mais je n'ai pas d'alert déclenché.

Je dois faire quelque chose de mal pouvez vous m'aider svp?

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<?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="jquery.js"></script>
		<script type="text/javascript" src="masked.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;
				// }
			// }
 
			function mask()
			{
				$("#NumBl").mask("99 9 99 9* 999 99");
			}
 
			function ControleChamp()
			{
				if($("#NumBl").val() == "" || $("#NumBl").val() == "00 0 00 00 000 00")
				{
					$("#NumBl").css({borderColor:"red"});
					return false;
				}
				else 
				{
					return true;
				}
			}
			function monFocus()
			{
				alert('1');
				// $("#NumBl").focus();
				$("#NumBl").css({borderColor:"black"});
			}
		</script>
	</head>
 
 
	<body onload="mask();">
		<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 for='NumBl'>Num&eacute;ro BL</label> : <input id='NumBl' type="text" name="NumBl" /><br/><br/>
 
 
					<input type="submit" value="Valider" /><br/>
					</form>
				</p><br/><br/>
 
				<input type="button" value="Exit" onclick=function(){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 id='pdfFrame' src='".$Target."' width='827' height='900' align='middle' onload=\"document.getElementById('pdfFrame').onload = function(){  MasqueSaisie();document.getElementById('NumBl').focus();} \" ></iframe>";
                                        echo "<iframe id='pdfFrame' src='".$Target."' width='827' height='900' align='middle' onload= function(){ monFocus();} ></iframe>";
 
                                ?>
			</div>
		</div>
 
	</body>
</html>
 
Je vous remercie par avance.

24/05/2012, 18h07
Willpower

Code:

<iframe ... onload= function(){ monFocus();} >

attribut= -wait for it- valeur

ton navigateur n'est pas devin, les attributs de tes balises étant séparés par des espaces, ton "function..." sera considéré comme un nom d'attribut inconnu par ton navigateur.

d'ailleurs pour éviter les problèmes entoure TOUJOURS les valeurs de tes attributs par des guillemets, bref :

Code:

<iframe ... onload="function(){ monFocus();}" >

Sera déjà un bon début pour corriger ton code.

---

Deuxièmement pour chaque attribut "event" ton navigateur crée une fonction anonyme de ce que tu lui as passé sous forme de string, tu n'as donc pas besoin d'en recréer (même si ça n'est pas source d'erreurs, c'est totalement inutile) :

Code:

<iframe ... onload="monFocus();" >

edit: note que le "onload" d'une balise HTML prend un string en paramètre mais le "onload" en javascript prend une fonction (et/ou peut-être un string, mais si c'est le cas, la fonction est plus conseillée) et si tu veux exécuter du code, une fonction anonyme est dans ce cas utile.
25/05/2012, 11h21
darkterreur
Bonjour,
merci pour ces explications.

J'ai fait les modification qui s'impose donc mais le resultat n'est pas mieux.

Code:

echo "<iframe id='pdfFrame' src='".$Target."' width='827' height='900' align='middle' onload=\"monFocus();\"></iframe>";

a savoir que j'ai rajouter une modification de couleur du input pour voir il passait dedans.
Code:

1 2 3 4 5 6 7 function monFocus() { // alert('1'); $("#NumBl").css({borderColor:"blue"}); $("#NumBl").focus(); }
J'ai aussi essayer d’appeler ma fonction avec le onload du body et c'est la seul moment ou mon input devient bleu et l'on voit clairement le focus se sauver au chargement du iframe. En revanche dans les première ligne de ce petit pavé, pas de couleur bleu pour mon input.

J'ai l'impression que la fonction n'est pas apelé
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.