Personnaliser un focus dans un contrôle de saisie

Version imprimable

16/08/2010, 20h00
xjulio59

Personnaliser un focus dans un contrôle de saisie

Bonjour, je travaille sur un projet de fiche client web avec inscription en BDD, envoi de mail aux différents services...
J'aimerais l'améliorer, actuellement j'effectue mes contrôles de saisies grâce à un fichier javascript et je voudrais personnalisé mes focus (soit entouré mes champs en rouge ou les mettre sur un fond rouge transparent).
Pouvez-vous m'apporter vos connaissances pour m'aider à réaliser cela?
Merci à vous & Bonne soirée ;)
16/08/2010, 20h45
SpaceFrog

il suffit de mettre dans une variable globale l'element en defaut et de par exemple lui modifier son className (pour lui mettre une bordure rouge ) et lui donner le focus.

Hello

Code:

1
2
3
4
5
6
 
<style>
.defaultStyle{border:1px solid black}
.selectedStyle{border:1px solid red}
</style>
<input type="input" onFocus="this.className='selectedStyle'" onBlur="this.className='defaultStyle'"/>

bye
Nico

Exemple:
la champs est valide si non vide.
les champs vides prennent une bordure rouge
le focus est donné au premier champs vide.

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
.valid {
	border: inset 2px silver:
	}
.notvalid {
	border: solid 2px red;
	}
 
</style>
<script type="text/javascript">
function verif(obj){
var i=0;
var gotcha=false;
while (zone=document.getElementById('_'+ ++i)){
  if(zone.value.length>0){zone.className='valid';}
  else{                        
     zone.className="notvalid"
     if(!gotcha){
         this.fcs=zone;
         gotcha=true;
         }
     }
 }
 
gotcha && this.fcs.focus() 
return !gotcha 
 }
</script>
</head>
 
<body>
<form action="javascript:alert('envoyé')" onsubmit="return verif(this)" >
<input type="text" id="_1" value="" />
<input type="text" id="_2" value="" />
<input type="text" id="_3" value="" />
 
<input type="submit" id="_" value="go" /></form>
</body>
 
</html>