J'ai un formulaire de connexion, lorsque la page est ouverte, Chrome remplit automatiquement les informations d'identification. Cependant, l'événement onChange des éléments input n'est pas déclenché.
Cliquer n'importe où sur la page les enregistre dans l'attribut value du input , ce dont nous avons besoin. J'ai essayé de faire event.target.click () , cela n'a pas aidé.
Dans onChange, j'ai mis les valeurs dans un état comme:
this.setState({ email: event.target.value })
6 Réponses :
J'ai créé un exemple d'application ici https://codesandbox.io/s/ynkvmv16v
Est-ce que cela résout votre problème?
Non, car e.target.value est toujours vide. Voilà le problème.
Avez-vous essayé de consigner la valeur de l'événement? Votre extrait de code ci-dessus est très faux. event.target.email doit être event.target.value. Pouvez-vous également me dire la version de votre navigateur où vous rencontrez ce problème?
Correction de cette faute de frappe. Chrome macOS 73.0.3683.75
Enregistrer quelle valeur d'événement? onChange n'est pas déclenché, il n'y a donc pas d'événement.
Je suis sur la même version de chrome et je ne trouve pas le problème. Cela vous dérange-t-il de partager votre code via codesandbox.io?
Veuillez fournir plus qu'un lien externe pour augmenter la valeur du fil ici. Le lien peut être indisponible à l'avenir. Copiez éventuellement une version simple de votre solution dans votre réponse ici. :)
event.target.click () "simule" un clic et déclenche des événements onClick (), mais n'agit pas comme un clic physique dans la fenêtre du navigateur.
Avez-vous déjà essayé d'utiliser focus () au lieu de (ou en plus de) click ()? Vous pouvez essayer de mettre le focus sur votre élément d'entrée, puis vérifier si la valeur est alors définie. Si cela fonctionne, vous pouvez ajouter this.setState ({email: event.target.value}) sur le focus ainsi que sur le clic.
Pas besoin de déclencher un événement de clic, je pense que cela pourrait être mieux si vous définissez l'état email dans componentDidMount comme ceci
this.setState({ email: document.getElementById('email').value })
donc une fois que componentDidMount () est appelé, vous recevrez l'e-mail rempli par Chrome et mettre à jour l ' état puis afficher le bouton d'envoi et l'activer.
Vous pouvez en savoir plus sur le cycle de vie de React sur ce lien p >
Il semble que le problème se produise après le rendu, donc la vérification de componentDidMount peut ne pas faire de différence. Espérons que le PO pourra peser et nous apporter des éclaircissements.
En définissant le débogueur à l'intérieur de useEffect , la .value de l'entrée de l'e-mail est vide et useEffect ne se déclenche pas une deuxième fois (le paramètre de tableau est omis) une fois que Chrome a rempli l'entrée. Ce n'est que lorsque j'interagis avec la page (provoquant un rendu) que useEffect se déclenche une deuxième fois et peut détecter la valeur dans le champ de courrier électronique qui y a été mis par Chrome.
La réponse serait soit de désactiver la saisie semi-automatique pour un formulaire en utilisant autocomplete = "off" dans votre formulaire, soit d'interroger à intervalle régulier pour voir s'il est rempli.
Le problème est que le remplissage automatique est géré différemment par différents navigateurs. Certains envoient l'événement de changement, d'autres non. Donc c'est presque impossible pour accrocher un événement qui est déclenché lorsque le navigateur remplit automatiquement un champ de saisie.
Modifier le déclencheur d'événement pour différents navigateurs:
Pour les champs nom d'utilisateur / mot de passe:
- Firefox 4, IE 7 et IE 8 ne diffusent pas l'événement de modification.
- Safari 5 et Chrome 9 envoient l'événement de modification.
Pour les autres champs de formulaire:
- IE 7 et IE 8 ne diffusent pas l'événement de modification.
- Firefox 4 envoie l'événement de modification de modification lorsque les utilisateurs sélectionnent une valeur dans une liste de suggestions et sortent du champ.
- Chrome 9 n'envoie pas l'événement de modification.
- Safari 5 envoie l'événement de modification.
La meilleure option consiste à désactiver la saisie semi-automatique pour un formulaire en utilisant
autocomplete = "off"dans votre formulaire ou sondage à intervalle régulier pour voir s'il est rempli.Pour votre question de savoir si elle est remplie sur ou avant document.ready encore une fois, cela varie d'un navigateur à l'autre et même d'une version à l'autre. Pour les champs de nom d'utilisateur / mot de passe uniquement lorsque vous sélectionnez un mot de passe de nom d'utilisateur le champ est rempli. Donc, dans l'ensemble, vous auriez un code très compliqué si vous essayez de vous joindre à n'importe quel événement.
Vous pouvez avoir une bonne lecture à ce sujet ICI
Jetez un œil à ce fil de discussion: Détection du remplissage automatique du navigateur
Le lien Good Read ne peut pas être atteint
Je suis tombé sur ce problème parce que j'avais le même problème. Pas dans React, mais le problème est universel. Peut-être que cela aidera n'importe qui d'autre qui tombera dessus.
Aucune des autres réponses ne répond réellement au problème. Le problème décrit par l'OP est que Chrome ne définit pas la valeur des entrées tant qu'il n'y a pas eu d'interaction de l'utilisateur avec la page . Cela peut être un clic sur la page, ou même la saisie d'éléments aléatoires dans la console.
Après l'interaction de l'utilisateur, la valeur des entrées est définie et l'événement de modification est déclenché.
Vous pouvez même le voir visuellement, car le style du texte rempli automatiquement est différent lors de sa première présentation et change le style des entrées une fois que l'interaction a eu lieu.
Aussi: déclencher un clic ou définir le focus ou autre à partir du code n'aide pas, seulement une vraie interaction humaine.
Donc, interroger la valeur n'est pas une solution, car la valeur restera vide si la page n'est pas cliquée. Indiquer également que vous ne pouvez pas vous fier à l'événement de modification n'est pas vraiment pertinent, car l'événement est correctement déclenché, lors du réglage différé de la valeur. C'est le délai indéfini qui est le problème.
Vous pouvez cependant interroger l'existence des pseudo classes CSS de Chrome. Dans Chrome 83 (juin 2020), il s'agit de : -internal-autofill-selected et : -internal-autofill-previewed . Celles-ci changent cependant régulièrement. De plus, ils ne sont pas directement présents après le rendu. Vous devriez donc définir un délai d'expiration suffisant, ou interroger pour cela.
Exemple bâclé en JavaScript vanille:
var input = document.getElementById('#someinput');
setTimeout(() => {
if (input.matches(':-internal-autofill-selected')) {
/* do something */
}
}, 500);
Vous ne pouvez toujours pas obtenir la valeur à ce point, donc à cet égard, cela ne résout toujours pas le problème, mais au moins vous pouvez activer le bouton d'envoi en fonction de l'existence de données remplies automatiquement (comme l'OP voulait le faire). Ou faites d'autres choses visuelles.
Utiliser oninput au lieu de onchange ferait l'affaire
pouvez-vous poster un lien vers jsfiddle? Ce serait d'une grande aide.
Si vous désactivez la fonctionnalité de base, vous devez également vérifier son activation au démarrage. Mettez donc la vérification «if email.length» quelque part Une fois que le navigateur a complètement chargé toutes les données afin de détecter que l'entrée est automatiquement remplie. Un délai d'expiration de base pourrait fonctionner.
Il n'est jamais rempli. Lorsque j'ouvre la Developer Console et que je vérifie, le champ de valeur est vide, jusqu'à ce que je clique quelque part.
Avez-vous déjà résolu cela? J'ai le même problème. La page se charge et l'entrée (adresse e-mail) est remplie, mais la valeur de la référence d'entrée est vide jusqu'à ce que la page interagisse avec (un clic fera l'affaire), donc le deuxième rendu, c'est bien. Je devrais mentionner que ce n'est que dans Chrome; Firefox fonctionne très bien.
si vous pouvez fournir du code, ce serait mieux