Implémentation des invites dans l'entrée de texte

Question

J'ai un formulaire avec des entrées de texte: login, mot de passe.

Si l'utilisateur voit ce formulaire la première fois, les textes d'entrée doivent "contenir" des invites, telles que "entrer le mot de passe", "entrer le mot de passe".

Si l'utilisateur clique sur la saisie de texte, son invite devrait disparaître pour permettre la saisie.

J'ai vu divers exemples, qui utilise l'image de fond avec du texte pré-rendu dessus.

Ces images apparaissent avec jQuery suivantes:

$("form > :text").focus(function(){ 
    // hide image 
}).blur(function(){ 
    // show image, if text-input is still empty 
    if ($(this).val() == "") 
     // show image with prompt 
}); 

Cette approche a des problèmes suivants:

• localisation

  est impossible

• nécessité d'effectuer une pré-rendu des images pour diverses invites textuelles

• frais généraux avec chargement d'images

Comment surmontez-vous un tel problème?

Answer 1

Ceci est communément appelé un "espace réservé", et fonctionne actuellement dans plusieurs navigateurs maintenant.

Check out A Form of Madness: Placeholder Text:

<form> 
    <input name="q" placeholder="Search Bookmarks and History"> 
    <input type="submit" value="Search"> 
</form> 

Et pour les navigateurs qui ne supportent pas, voici une shim JavaScript (jQuery) qui utilisera ce texte pour simuler le même effet: jquery-html5-placeholder-shim. Si vous incluez une référence à la cale, ajoutez-la à votre JavaScript et vous êtes prêt à partir.

$(function(){ 
    $.placeholder.shim(); 
}); 

Quant à la question de la localisation, aussi longtemps que vous produisez HTML avec les informations correctes à l'intérieur du placeholder attribut que vous devriez être bien.

Answer 2

Pourquoi vous simplifiez qui vient Ussing quelque chose comme:

<input type="text" name="username" value="Your User Name" onfocus="if (this.value=='Your User Name') this.value = ''"> 

Si l'utilisateur donne le focus à cette entrée, il supprimera le texte par défaut, ce qui permet d'écrire quelqu'un frais :)

Answer 3

Parce que Zuul, une valeur. Peut être soumise et éventuellement contourner les règles d'achèvement des formulaires et les exigences sans que l'utilisateur n'entre quoi que ce soit. Un espace réservé est une valeur plus douce que le formulaire ne reconnaît pas comme une valeur réelle si elle n'est pas mise en évidence par l'utilisateur.

Une solution simple qui intègre votre réponse et aborde plus directement la question du demandeur pourrait être quelque chose comme ceci:

Cela effacera le texte de l'espace réservé lorsque le champ est sélectionné/ciblé et retourner le texte de l'espace réservé si décochée sans entrée présent dans le domaine où décochée:

<input type="text" placeholder="1866" onFocus="if (this.placeholder=='1866') this.placeholder = ''" onBlur="if (placeholder=='') this.placeholder='1866'"> 

Cela effacera le texte de l'espace réservé uniquement lorsqu'un utilisateur tape sur le terrain, mais pas avant:

<input type="text" placeholder="1492"> 

Cette version ne nécessite rien de plus pour fonctionner comme prévu.

Cheers.