événement de remplissage automatique du navigateur

Question

Je fais un site web où j'ai un formulaire de connexion. Je sais que les utilisateurs peuvent enregistrer leurs noms d'utilisateur et mots de passe dans leur navigateur Web.

Je dois afficher/masquer une étiquette(). Si le champ est vide alors l'étiquette doit apparaître, s'il y a une valeur dans le champ, alors l'étiquette doit cacher,

mais cela ne fonctionne pas avec l'auto-complétion du navigateur, est-ce que je peux suivre ça?

J'ai essayé avec

jQuery.change(); 

mais cela ne fonctionne pas.

Y a-t-il quelque chose que je puisse faire à ce sujet plutôt que de désactiver la saisie semi-automatique?

grâce

Answer 1

La norme ici est d'utiliser l'espace réservé attribut sur l'élément d'entrée pertinente:

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

username sera affiché dans l'entrée quand il n'y a pas de texte, et caché autrement . Si vous utilisez ceci, alors vous devriez probablement aussi utiliser quelque chose comme Modernizr pour détecter le support et créer une étiquette de texte normale sinon.

Answer 2

C'est très simple.
Je l'utilise pour les champs de texte de mon site.

Ce codage est en texte Javascript.

1. créer un <form> avec le nom et id = "comform" (vous pouvez changer plus tard, juste pour la référence).
2. créer un <input type = "text" avec name et id = "Message" (vous pouvez modifier cela plus tard, juste pour référence).
3. créer un <div> avec id = "ifsend" (vous pouvez le modifier plus tard, juste pour référence).

Créez également une variable pour stocker la longueur dans la numérotation. Var (vous pouvez modifier cela plus tard, juste pour référence).

function counter() { 
    var numbering; 
    numbering = document.forms["comform"]["Message"].value.length; 
    if (numbering == 0) { 
     label(); 
    } 
    if (numbering != 0) { 
     document.getElementById('ifsend').innerHTML=""; 
    } 
} 

function label() { 
    document.getElementById('ifsend').innerHTML="Your form value is empty"; 
} 

Answer 3

Vous devez déclencher manuellement l'événement de changement:

$("#username") 
.change(function() { 
    // do stuff on change (check for default) 
}) 
.trigger("change"); 

ou utilisez une bibliothèque de filigrane si vous ne souhaitez que pour activer le texte par défaut (ou l'attribut d'espace réservé avec Modernizr comme aviraldg recommande).