focus permanent sur un champ

**legrandse** · 19/04/2012, 19h18

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.

**TCHdvlp** · 19/04/2012, 19h25

Bonjour.

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

du genre

Code :

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

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

**MaitreKaio** · 20/04/2012, 10h28

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)

**legrandse** · 20/04/2012, 11h23

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.

**SpaceFrog** · 20/04/2012, 11h36

Code :

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

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

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

Code :

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

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

est plus correct

**javatwister** · 20/04/2012, 11h49

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

**MaitreKaio** · 20/04/2012, 16h39

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

**legrandse** · 20/04/2012, 19h34

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 :

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

focus permanent sur un champ

JavaScript

Vue hybride

Discussions similaires

Partager

Partager