onBlur, onFocus - inputs

Version imprimable

31/07/2012, 16h05
Spire_

onBlur, onFocus - inputs

Bonjour,

Je bloque avec un input de type texte.
je souhaiterai faire que lorsque le champs est vide au moment de la saisie du texte, et bien qu'il y ai une valeur qui s'affiche par défaut.

Par exemple avec onBlur():

Code:

<input type="text" onBlur="alert('toto')" value="toto" />

J'aimerai qu'à la place de l'alerte, s'écrive "toto" (donc lorsque l'on clique en dehors du champs en laissant le champs vide).

Au plaisir de vous lire.
31/07/2012, 16h52
medessad
Bonjour,
Tu remplacera la ligne par celle ci:

Code:

<input type="text" onBlur="fonction()" id="monchamps" />

et dans une balise script tu ajoutes le code suivant:
Code:

1 2 3 4 5 6 7 function fonction(){ var valeur = document.getElementById("monchamps").value; if(valeur == ""){ document.getElementById("monchamps").value = "toto"; }
J'espère t'avoir aidé ;)

Merci pour ta réponse,

J'ai adapté ton code au mien et ça ne fonctionne pas non plus.

Voici le rendu:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <?php echo '<input type="text" id="search_home" onBlur="fonction()" placeholder="" autocomplete="off" value="' . $locality . '" name="search" />'; ?> <script type="text/javascript"> function fonction(){ var valeur = document.getElementById("search_home").value; if(valeur == ""){ document.getElementById("search_home").value = "toto"; } </script>
$locality est égale à la ville de l'utilisateur.

La console m'indique que fonction() n'est pas définis et que je respecte pas la fin de l'input.

01/08/2012, 06h54
andry.aime

Bonjour,

Tu as oublié l'accolade fermante "}" de la fonction.

A+.

Bonjour,

Merci, en effet j'avais oublié cette accolade, donc je n'ai plus d'erreur, mais ça ne fonctionne toujours pas et je ne vois vraiment pas comment m'y prendre.

Avez-vous des idées ?

Edit: ça fonctionne très bien au final, c'est juste que j'ai attribué un autre code javascript avec ce même id.

J'ai ce code là avec pour l'autocompletion de l'API Google:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> function fonction(){ $(document).ready(function () { var input = document.getElementById('search_home'); var options = { types: ['(cities)'], }; autocomplete = new google.maps.places.Autocomplete(input, options); }); var valeur = document.getElementById("search_home").value; if(valeur == ""){ document.getElementById("search_home").value = "<?php echo $locality ?>"; } } </script>
Il y a encore un petit hic, la première manipulation fonctionne, donc si je laisse le champs vide et que je clique en dehors, ma valeur revient bien, mais lorsque j'éffectues encore une fois cette même manipulation, la valeur ne revient plus.

Comment faire, pour qu'elle revienne à chaque fois ?

Je reviens vers vous, car j'ai un autre problème,
Le code de medessad fonctionne bien, mais le problème c'est que vu que j'applique déjà le script de l'API Google à cet ID, il y a conflict.

J'ai ce code actuellement:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <input type="text" id="search_home" onBlur="come_back()" autocomplete="off" value="' . $locality . '" name="search" /> <script type="text/javascript"> function come_back(){ $(document).ready(function () { var input = document.getElementById('search_home'); var options = { types: ['(cities)'], }; autocomplete = new google.maps.places.Autocomplete(input, options); }); var valeur = document.getElementById("search_home").value; if(valeur == ""){ document.getElementById("search_home").value = "<?php echo $locality ?>"; } } </script>
L'autocompletion de Google ne fonctionne qu'une fois un onBlur éffectué, or je souhaiterai qu'il fonctionne tout le temps.

Vous avez une solution ?

01/08/2012, 13h18
andry.aime

Essaie d'utiliser onchange à la place de onblur.

A+.
01/08/2012, 15h02
Spire_

Oui, j'avais essayé, mais ça ne fonctionne pas.
01/08/2012, 23h20
NoSmoking
Bonsoir,
lu en diagonale, il existe defaultValue que l'on peut rétablir et en CSS3 l'attribut placeholder que tu as déjà testé.
Code:

1 2 3 4 5 function fctOnBlur( obj){ if( obj.value === ''){ obj.value = obj.defaultValue; } }
Code:

<input type="txt" onblur="fctOnBlur(this)" placeholder="Texte" value="Texte">
01/08/2012, 23h40
Spire_

Bonsoir,

je te remercies pour ta réponse, mais ce n'est pas tout à fait mon problème, je m'explique, lorsque j'arrive sur ma page j'ai un champs recherche pré-remplis avec la localité de l'utilisateur en value, je souhaiterai que lorsque l'utilisateur clique dans ce champs de localité, l'autocompletion de l'API Google fonctionne sans avoir à vider le champs et cliquer à l'extèrieur de celui-ci.
Or, je souhaiterai aussi que lorsque l'on mette le champs vide et que l'on clique en dehors, la valeur par défaut apparaisse.

J'arrive à faire ces deux choses, mais jamais en même temps.

Des suggestions ?

l'API Google ajoute une couche dans la gestion de l'input de saisie de recherche, c'est pour cette raison qu'il faut mettre placeholder="" dans la balise, afin d'éviter qu'il n'affiche cette valeur quand on vide le champ.

A l'issu de la réponse sur l'auto-complétion, il faut affecter à la valeur par défaut de l'INPUT, oInput.defaultValue, une partie de l'adresse pour que l'auto-complétion puisse se redéclencher, l'affectation du nom complet ne permettant pas l'apparition de la sélection.

Pour être plus clair, un morceau de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
  // l'INPUT search
  var oInput = document.getElementById('input_search');
  // création de l'objet autocomplete
  var oAutoComplete = new google.maps.places.Autocomplete( oInput);
  // ajout événement si changement de choix
  google.maps.event.addListener( oAutoComplete, 'place_changed', function(){
    // récup. des datas du PlaceResult object
    var oPlace = this.getPlace();
    // AJOUT pour gestion sur événement de l'INPUT
    oInput.defaultValue = oPlace.name;
    // IMPORTANT! ne pas utiliser oPlace.formatted_address
  });

...maintenant passons à la gestion des événements onblur et onfocus de l'INPUT

Pour le focus on affectera à l'INPUT la valeur par défaut, celle qui est donc déjà présente dans le champ

Code:

1
2
3
  oInput.onfocus = function(){
    this.value = this.defaultValue;
  };

Pour le blur si la valeur est vide on affecte à l'INPUT la valeur par défaut sinon on modifie la valeur par défaut en la remplaçant par la valeur saisie.

Code:

1
2
3
4
5
6
7
8
9
10
11
  oInput.onblur = function(){
    // met en queue la mise à jour
    setTimeout( function(){
      if( oInput.value === ''){
        oInput.value = oInput.defaultValue;
      }
      else{
        oInput.defaultValue = oInput.value;
      }
    },1);
  };

Nota : le setTimeout n'est la que pour laisser le temps aux actions par défaut de l'API de se réaliser, sans cela il se peut quelles se réalisent après notre modification et la cela serait moyen.

Voilà pour finir je mets l'exemple complet

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
129
130
131
132
133
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>[Google API v3]Recherche avec Autocompletion</title>
<meta name="Author" content="NoSmoking">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<style type="text/css">
html, body {
  height:100%;
  margin:0;
  padding:0;
  font-family:Verdana, sans-serif;
  font-size:1em;
  background-color:#FAFAFA;
}
h1 {
  color:#4488bb;
  font-size:1.5em;
  margin:0;
  padding:0.5em;
  border:1px solid #4488bb;
}
h1 span{
  font-size:0.6em;
  font-style:italic;
  float:right;
}
#page {
  overflow:hidden;
  margin:0 auto;
  padding:0;
  width:800px;
  min-height:100%;
  background-color:#FFF;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
}
#entete{
  padding:1em;
}
#search{
  width:600px;
  margin:1em auto;
}
#div_carte{
  height:600px;
  width:600px;
  margin:auto;
  border:1px solid #c0c0c0;
}
#input_search{
  font-family:Verdana, sans-serif;
  font-size:1.0em;
  border:1px solid #e0e0e0;
  line-height:1.5em;
  height:1.5em;
}
/* surclasse le CSS par défaut de l'API */
#input_search.pac-placeholder{
  color: black;
}
</style>
<script type="text/javascript">
function initCarte(){
 
  var oMap = new google.maps.Map(document.getElementById('div_carte'),{
    backgroundColor : '#fff',
      center: new google.maps.LatLng( 46.80, 1.70),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  );
 
  var oInput = document.getElementById('input_search');
 
  var oAutoComplete = new google.maps.places.Autocomplete( oInput);
  oAutoComplete.bindTo('bounds', oMap);
 
  var oMarker = new google.maps.Marker({
    map: oMap
  });
 
  google.maps.event.addListener( oAutoComplete, 'place_changed', function(){
    var oPlace = this.getPlace();
 
    // AJOUT pour gestion sur événement */
    oInput.defaultValue = oPlace.name;
    // adapte au viewport
    if( oPlace.geometry.viewport) {
      oMap.fitBounds( oPlace.geometry.viewport);
    }
    else {
      oMap.setCenter( oPlace.geometry.location);
      oMap.setZoom(12);
    }
    oMarker.setPosition( oPlace.geometry.location);
  });
 
  // gestion sur la saisie
  oInput.onfocus = function(){
    this.value = this.defaultValue;
  };
  oInput.onblur = function(){
    // met en queue la mise à jour
    setTimeout( function(){
      if( oInput.value === ''){
        oInput.value = oInput.defaultValue;
      }
      else{
        oInput.defaultValue = oInput.value;
      }
    },1);
  };
}
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
  <div id="entete">
    <h1><span>[Google Maps API V3]</span>Recherche avec Autocompletion</h1>
  </div>
  <div id="search">
    <label for="input_search">Recherche : </label>
    <!-- important de mettre placeholder à "" -->
    <input id="input_search" type="text" size="50" value="Paris" placeholder="">
  </div>
  <div id="div_carte"></div>
</div>
</body>
</html>

03/08/2012, 07h47
Spire_

Super ! Un grand merci à toi NoSmoking, j'ai adapté ton code au mien et tout fonctionne parfaitement !

Merci à vous tous d'ailleurs pour avoir pris le temps de me répondre.
Je vous souhaites une bonne journée !