Lors de la création d'un formulaire ou d'un questionnaire, il peut être nécessaire d'attribuer une valeur saisie par l'utilisateur à un champ spécifique. Par exemple, ajouter des entrées confidentielles, c'est-à-dire un mot de passe ou une valeur codée afin de les utiliser. Dans de tels cas, la définition de la valeur d'un élément d'entrée masqué via JavaScript aide à assurer la sécurité des données.
Ce blog discutera de la procédure pour définir la valeur d'un champ de saisie masqué via JavaScript
Comment définir la valeur d'un champ de saisie masqué via JavaScript ?
Pour définir la valeur du champ de saisie masqué via JavaScript, appliquez les approches ci-dessous :
Méthode 1 : définir la valeur de l'élément masqué via la propriété innerHTML
Les ' innerHTML ” renvoie le contenu HTML de l'élément. Cette propriété peut être utilisée pour définir et ajouter la valeur définie par l'utilisateur au champ d'entrée caché alloué.
Syntaxe:
élément.innerHTML = texte
Dans la syntaxe ci-dessus, ' élément ' fait référence à l'élément qui doit être ajouté avec le ' texte ' évaluer.
Exemple
Passons en revue l'exemple ci-dessous :
< contribution taper = 'caché' identifiant = 'élément caché' évaluer = '' >< scénario >
laisser monEntrée = invite ( 'Veuillez entrer votre texte' , '' ) ;
si ( monEntrée ! = nul ) {
laisser x = document.getElementById ( 'élément caché' ) .innerHTML = 'La valeur de l'élément caché est : ' + monEntrée ;
alerte ( X )
}
scénario >
Dans le bloc de code ci-dessus :
- Tout d'abord, créez le champ de saisie ayant les attributs indiqués.
- Les ' taper ' attribut avec la valeur ' caché ” signifie qu'il s'agit d'un champ masqué.
- Après cela, le « rapide ” boîte de dialogue prend une valeur de l'utilisateur.
- Maintenant, appliquez une vérification sur la valeur définie par l'utilisateur afin qu'elle ne soit pas ' nul ' en utilisant le ' si ' condition.
- Enfin, accédez au champ de saisie caché par son ' identifiant ' en utilisant le ' getElementById() ' et définissez la valeur définie par l'utilisateur via la ' innerHTML ' biens.
- Enfin, affichez la valeur ajoutée via une alerte.
Sortir
Comme observé, la valeur saisie par l'utilisateur est ajoutée au champ de saisie masqué.
Méthode 2 : définir la valeur de l'élément masqué à l'aide de l'approche jQuery
Dans cette approche, jQuery ' val() ” sera utilisée pour allouer la valeur du champ de texte de saisie visible au champ de saisie masqué.
Exemple
Passons en revue le code suivant :
< p > Entrez la valeur pour élément caché p >< contribution identifiant = 'monEntrée' évaluer = '' taper = 'texte' />< Br >
< contribution identifiant = 'élément caché' taper = 'caché' évaluer = '' />
< Br >
< bouton identifiant = 'btnShow' > Nous faire parvenir bouton >
< scénario src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > scénario >
< scénario >
$ ( '#btnShow' ) .au ( 'Cliquez sur' , une fonction ( ) {
laisser valeur d'entrée = $ ( '#monEntrée' ) .val ( ) ;
$ ( '#élément caché' ) .val ( valeur d'entrée ) ;
alerte ( 'La valeur de l'élément caché est : ' + valeur d'entrée ) ;
} ) ;
scénario >
Dans les lignes de code ci-dessus :
- Tout d'abord, incluez un champ de saisie de texte ayant les attributs indiqués.
- De même, allouez un autre champ de saisie masqué, comme en témoigne son ' taper ' attribut.
- Ajout de la balise
- Après cela, incluez la bibliothèque jQuery à l'aide du ' src ' attribut dans le '