focus permanent sur un champ

Version imprimable

19/04/2012, 19h18
legrandse

focus permanent sur un champ

Bonjour à tous,

Lorsque j'utilise un scanner de code barre, le focus du champ est toujours activé sur celui-ci.

Seulement voilà, il arrive que certain utilisateur cliquent ailleurs sur la page web et donc le focus est perdu.
Ensuite ils scannent le code mais "dans le vide" et se plaignent que l'appli ne fonctionne pas car ils ne se rendent pas compte que le curseur n'est plus dans le champ prévu.

Y a t-il moyen d'empêcher de cliquer ailleurs dans la page web et de laisser uniquement les champs de formulaire disponibles pour le curseur de la souris ?

Merci pour votre aide.
19/04/2012, 19h25
TCHdvlp

Bonjour.

A priori je dirais de forcer le 'onfocus' sur l'évenement 'onblur'

du genre

Code:

<id="monChamp" onBlur="javascript:this.focus();" />
20/04/2012, 10h28
MaitreKaio

A quoi servent donc les autres champs du formulaire ?
Je demande parce que cela signifie peut-être que tu as d'autres cas d'utilisation du formulaire que la lecture d'un code barre. Si c'est le cas, tu as surement intérêt à fournir des pages séparées:
- 1 page dédiée à la lecture code-barre
- 1 page pour ton autre cas d'utilisation (voire plusieurs éventuellement)
20/04/2012, 11h23
legrandse

Hello,

la page se présente comme ceci:

Une balise DIV encadre le champ de lecture pour le scan

Une autre balise div encadre un champ de recherche

L'idéal serait que le curseur pourrait se trouver soit sur le champ pour le scan ou le champ pour la recherche mais pas ailleurs.
20/04/2012, 11h36
SpaceFrog

Code:

<id="monChamp" onBlur="javascript:this.focus();" />

Heu on peut mettre une recette de crèpes suzette dans un onblur ??

Code:

<id="monChamp" onblur="this.focus();" />

est plus correct
20/04/2012, 11h49
javatwister

le choix d'un input est contestable... vu que comme son nom l'indique un peu, il sert à entrer des données... et là... euh... je ne me souviens plus du code de ta page :mrgreen:
20/04/2012, 16h39
MaitreKaio

Je ne suis plus bien là... tu n'as que deux zones de saisie dans la page ? Sur quoi d'autre tes utilisateurs cliquent donc ?
En tous cas, la solution proposée qui empêche de quitter le champ ne me parait pas viable, vu que ça empêcherait d'accéder à la zone de recherche...

Entre les deux il y a le fond de la page qui est constitué d'une image.

Voici le code de la page pour mieux se rendre compte

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
<?php
session_start();
?>
 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
	<title>GGHF encodage randon&eacute;e</title>
 
	<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css">
 
 
 
 
<script type="text/javascript">
function focus()
  {
  document.getElementById('newid').focus()
  }
</script>
 
 
 
 
 
 
</head>
 
<body onLoad="focus()">
<div id="main"> 
 
<img class="tramea" src="images/trame3.png" alt="Fond">
<img class="trameb" src="images/trame3.png" alt="Fond">
<img class="trames" src="images/trame3.png" alt="Fond">
<img class="tramer" src="images/trame3.png" alt="Fond">
 
<img class="logo" src="images/logogghfvanilla.png" alt="Fond">
 
 
<div id="eid">
 
<form name="formulaire" method="post" action="connect.php">
 
 <?php
 
if(!empty($_POST))
   {
             $_SESSION['rando'] = $_POST;
                          
   }
$rand = trim($_SESSION['rando']['rando']);
?>
<font face="arial">S&eacute;lection automatique de la rando de:</font>
<font color="red" face="arial" size="+1"> <?php echo $rand ?></font> <br /> 
<INPUT TYPE="hidden" NAME="rando" value="<?php echo $rand ?> "> 
<p></p>
 
 
 
 
         <p></p>
        Code barre de la carte: <br/>
             <input type="texte" name="newid" title="Scanner entre 0 et 5cm du chronocode" onBlur="javascript:this.focus();" id="newid" style="width:350px ; height:50px ; text-align:right ; font-size:24px"/>
 
 
         </form>
 
 
</div>
 
<div id="search">
<?php
include ("search.php");
?>
</div>
 
 
<div id="affichage">
<?php
include ("affichage.php");
?>
</div>
 
<div id="titreaffichage">
Participants actuels &agrave; la rando:
 
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80px"><font size="2">NOM</font></td>
<td width="80px"><font size="2">PRENOM</font></td>
</tr>
</table>
</div>
<div id="tirage">
 
 
<form name="formulaire" method="post" action="tirage.php">
<input type="submit" value="Tirage au sort tombola"  style=" background:red ;height:40px; width:168px"/>
</form>
 
</div>
 
 
 
<div id="upload">
 
 
<form name="formulaire" method="post" action="dbsync/verifconnect2.php">
<input type="submit" value="Cl&ocirc;ture de session"  style=" background:red ;height:40px; width:168px"/>
</form>
V&eacute;rifier qu'une connexion internet est lanc&eacute;e
</div>
 
 
 
</div>
</body>
</html>