Personnaliser un focus dans un contrôle de saisie

**xjulio59** · 16/08/2010, 19h00

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

**SpaceFrog** · 16/08/2010, 19h45

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.

**Nicopilami** · 16/08/2010, 19h53

Hello

Code :

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

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

**SpaceFrog** · 16/08/2010, 20h40

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

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

Personnaliser un focus dans un contrôle de saisie

JavaScript

Vue hybride

Discussions similaires

Partager

Partager