Pour la création de projets en temps réel tels que les inscriptions à la newsletter, les formulaires de contact, les formulaires de paiement et les connexions des utilisateurs, le « e-mail ' Champ requis. L'utilisateur doit saisir son email pour continuer ou démarrer le processus et également pour se connecter à son compte. À cette fin, l'utilisateur doit fournir une connexion par courrier électronique ou s'inscrire à chaque fois, ce qui en fait une mauvaise expérience utilisateur. Ce problème est résolu à l’aide de la propriété de saisie semi-automatique JavaScript HTML DOM.
Ce blog explique la procédure de gestion de la propriété de saisie semi-automatique du courrier électronique d'entrée HTML DOM de JavaScript.
Comment gérer la propriété de saisie semi-automatique du courrier électronique d'entrée HTML DOM ?
La propriété de saisie semi-automatique de l'entrée HTML DOM ' e-mail ', fournit une liste contenant les données les plus récentes préalablement insérées dans l'élément ' e-mail ' champ. Il permet à un utilisateur de choisir son email dans la liste s'il est disponible automatiquement.
Syntaxe
La syntaxe de la propriété de saisie semi-automatique du courrier électronique d'entrée DOM est indiquée ci-dessous :
emailObj. Saisie automatique = 'marche|arrêt'
La syntaxe ci-dessus définit et supprime la propriété de saisie semi-automatique sur l'élément emailObj.
emailObj. Saisie automatique
Cette syntaxe récupère la valeur du « Saisie automatique ' pour savoir si cette propriété est activée ou non.
Ayons un programme JavaScript pour la propriété de saisie semi-automatique
Exemple : activation, désactivation et récupération de la valeur de la propriété de saisie semi-automatique
Dans cet exemple, la propriété de saisie semi-automatique va être désactivée, activée en définissant cette propriété sur « sur ' et ' désactivé ' respectivement. Ensuite, la valeur actuelle de la propriété autocomplete va être récupérée :
< corps >< centre >
< h1 style = 'couleur : bleu cadet ;' > Linux < / h1 >
E-mail: < saisir taper = 'e-mail' identifiant = 'demoEmail' >
< br >
< br >
< bouton sur clic = 'Désactiver()' > Désactiveur < / bouton >
< bouton sur clic = 'Activateur()' > Facilitateur < / bouton >
< h3 identifiant = 'cible' > < / h3 >
< bouton sur clic = 'Vérificateur()' > Vérificateur < / bouton >
< / centre >
< scénario >
fonction Désactiver() {
document.getElementById('demoEmail').autocomplete = 'off';
}
fonction Enabler() {
document.getElementById('demoEmail').autocomplete = 'on';
}
fonction Vérificateur() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / scénario >
< / corps >
L'explication du bloc de code ci-dessus est indiquée ci-dessous :
- Premièrement la ' saisir ' l'élément est créé avec un type d'attribut ' e-mail » pour accepter et effectuer une validation de base pour vous assurer que les données saisies sont bien le courrier électronique.
- Ensuite, trois éléments de bouton sont créés qui appellent le « Disabler()', 'Enabler()' et 'Checker() ' les fonctions.
- Maintenant, définissez le « Désactiveur () » en sélectionnant la fonction « saisir ' élément en utilisant son identifiant et en attribuant la valeur de ' désactivé ' pour son ' Saisie automatique ' propriété.
- Dans le ' Facilitateur ()', appliquez la même fonction ' Saisie automatique ', mais attribuez-lui maintenant une valeur de ' sur ».
- Après cela, définissez le « Vérificateur () » en ajoutant simplement « Saisie automatique ' à côté de la référence de l'élément d'entrée et stockez-le dans la variable ' j ».
- Au final, affichez la valeur de cette variable » j ' sur la page Web en utilisant le ' intérieurHTML ' propriété.
Le résultat après la compilation de ce qui précède est affiché comme :
La sortie montre que la propriété de saisie semi-automatique de l'e-mail d'entrée est désactivée et activée. Sa valeur est également récupérée et affichée sur la page Web.
Conclusion
La propriété de saisie semi-automatique du courrier électronique d'entrée HTML DOM crée automatiquement une liste contenant les valeurs que l'utilisateur a précédemment saisies dans le champ de courrier électronique. Ainsi, l'utilisateur peut facilement choisir parmi les données saisies précédemment et améliore ainsi l'expérience utilisateur. Cette propriété est définie lorsque la valeur de « sur ' lui est attribué et désactivé lorsque la valeur de ' désactivé ' est passé. Ce blog a expliqué la propriété de saisie semi-automatique du courrier électronique d'entrée DOM par JavaScript.