web-dev-qa-db-fra.com

Indice de champ de saisie HTML

Je veux fournir à l'utilisateur un indice sur ce dont il a besoin pour entrer dans mon champ de texte. Cependant, lorsque je définis la valeur, elle ne disparaît pas une fois qu'un utilisateur clique sur le champ de texte. Comment pouvez-vous le faire disparaître?

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
29
Frank Vilea

Vous devez attacher un événement onFocus au champ de saisie via Javascript:

<input type="text" onfocus="this.value=''" value="..." ... />
23
Marc B

Avec un peu de javascript

<input value="Enter username.." onfocus="if (this.value == 'Enter username..') this.value=''" ... />

HTML5 a un attribut Nice pour cela, appelé espace réservé

<input placeholder="Enter username.." ... />

mais ci-dessus n'est pas pris en charge dans les anciens navigateurs.

95
aorcsik

la meilleure façon de donner un indice est un espace réservé comme ceci:

<input.... placeholder="hint".../>

17
Kunal

Je pense que pour votre situation, facile et simple pour votre entrée html, vous pouvez probablement ajouter le titre de l'attribut

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
13
Jasonw

Avec HTML5, vous pouvez désormais utiliser l'attribut d'espace réservé comme ceci:

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form> 

http://www.w3schools.com/tags/att_input_placeholder.asp

9
J.Hendrix

C'est exactement ce que vous voulez

$(document).tooltip({ selector: "[title]",
                              placement: "top",
                              trigger: "focus",
                              animation: false}); 
<form id="form">
    <label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
    <input id="myinput1" type="text" title="This tooltip persists" />
    <input id="myinput2" type="text" title="This one also" />
</form>

[ ref ]

3
raghavsood33

J'ai le même problème et j'ai ajouté ce code à mon application et son travail me convient.

étape -1: ajout du plugin jquery.placeholder.js

étape -2: écrivez le code ci-dessous dans votre région.

$(function () {
       $('input, textarea').placeholder();
});

Et maintenant, je peux voir des espaces réservés sur les zones de saisie!

2
sharad kumar singh

Si vous voulez dire comme un texte en arrière-plan, je dirais que vous utilisez une étiquette avec le champ de saisie et que vous la positionnez sur l'entrée en utilisant CSS, bien sûr. Avec JS, vous atténuez le libellé lorsque l'entrée reçoit des valeurs et le fondez lorsque l'entrée est vide. De cette façon, il n'est pas possible pour l'utilisateur de soumettre la description, que ce soit par accident ou intentionnellement.

0
afaolek