web-dev-qa-db-fra.com

HTML entrée onfocus & onblur?

ok, aujourd'hui je crée une fonction HTML d'aide. Cela ressemble à ceci:

function Input($name,$type,$lable,$value= null){
  if (isset($value)) {
    //if (this.value=='search') this.value = ''
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" value="'.$value.'" onfocus="if (this.value==\''.$value.'\') this.value = \'\' "/>';  
  }
  if (!isset($value)) {
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" />'; 
  }
}

Comme vous pouvez le voir, si vous insérez une valeur, cela fera du JavaScript afin que lorsque je clique sur la case, le texte à l'intérieur de la case disparaisse,

Question: Comment pouvons-nous le faire pour avoir une valeur quand nous ne sommes pas sur l'entrée? (Veuillez regarder le champ de recherche sur stackoverflow, mais celui qui est sur stackoverflow ne revient pas après que nous ne pointions pas sur le champ de saisie. Peut-être en utilisant onblur? Ai-je raison?

J'espère que vous comprenez ce que je veux dire.

ok parce que certains d'entre vous ne reçoivent pas ce que je veux dire s'il vous plaît voir

quand je ne clique pas dessus.

alt text http://img39.imageshack.us/img39/4128/48048759.png

quand je clique dessus.

alt text http://img691.imageshack.us/img691/4485/94918020.png

quand je ne clique pas à nouveau dessus.

alt text http://img691.imageshack.us/img691/4485/94918020.png

il devrait être

quand je ne clique pas dessus.

alt text http://img39.imageshack.us/img39/4128/48048759.png

quand je clique dessus.

alt text http://img691.imageshack.us/img691/4485/94918020.png

quand je ne clique pas à nouveau dessus.

alt text http://img39.imageshack.us/img39/4128/48048759.png

javascripthtmleffectsonbluronfocus
10
Adam Ramadhan

Tu veux ça

<input ...
onfocus="if (this.value==this.defaultValue) this.value = ''"
onblur="if (this.value=='') this.value = this.defaultValue" />

Mise à jour: Certains navigateurs récents feront ce que vous voulez en ajoutant simplement l'attribut de marque de réservation:

<input placeholder="Please enter your name" />

Voici le PHP selon votre code

echo <<<END
<label for="$name">$lable</label>
<input type="$type" name="$name" id="$name" value="$value" 
 onfocus="if (this.value==this.defaultValue) this.value = ''" 
 onblur="if (this.value=='') this.value = this.defaultValue"/>
END;
29
mplungjan

Si je comprends bien, SO utilise cette ligne de code HTML pour produire cet effet.

<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">

Pas lié à votre question, mais vous pouvez et devriez remplacer votre deuxième déclaration if par une autre déclaration.

function Input($name,$type,$lable,$value= null){
  if (isset($value)) {
    //if (this.value=='search') this.value = ''
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" value="'.$value.'" onfocus="if (this.value==\''.$value.'\') this.value = \'\' "/>';  
  }
  else {
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" />'; 
  }
}

Parce que si isset ($ value) renvoie false, alors vous savez pertinemment qu'il n'est pas défini car il ne peut renvoyer qu'une des deux valeurs, true ou false.

EDIT: Ignorez cette réponse. La question n'était pas claire avant le montage.

3
Mike

En regardant la source de cette page, on voit ce qui suit

<form id="search" action="/search" method="get"> 
  <div> 
     <input name="q" class="textbox" tabindex="1" 
     onfocus="if (this.value=='search') this.value = ''" 
     type="text" maxlength="80" size="28" value="search"> 
  </div>
3
Steve Weet

Ou ceci si vous voulez qu'il revienne à la valeur par défaut quel que soit le texte saisi ...

<input ... 
onfocus="if (this.value==this.defaultValue) this.value = ''" 
onblur="if (this.value!=this.defaultValue) this.value = this.defaultValue" />
2
Andy

Essaye ça. Peut-être que cela peut vous aider:

<form action="/search" method="get">
<input type="text" name="q" value="Search..." onfocus="if (this.value == 'Search...') (this.value='')" onblur="if (this.value == '') (this.value='Search...')" />
0
Akmal Izzulhaq