Modification de l'attribut "Type" du texte au mot de passe

Propriété / attribut de type 'ne peut pas être modifié.

Edit: C'était précis pour JQuery au moment de son affectation. Voir d'autres réponses pour comment cela peut être fait maintenant.

Vous ne pouvez pas changer l'attribut type. Vous devez créer un nouvel élément et supprimer l'ancien comme celui-ci:

var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();

newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");

Il s'agit d'une mesure de sécurité que la plupart des grands navigateurs utilisent pour atténuer le vol d'écran et le vol de mots de passe (il est plus important d'aller dans l'autre sens, du mot de passe code> à code> sur code>).

Je ne peux pas dire à votre code ce que vous essayez de faire, mais voici ma supposition: vous voulez une zone de texte avec le mot mot de passe code> en tant que indice, et quand il se concentre , l'utilisateur entre dans son mot de passe comme champ de mot de passe. Pour y accomplir, vous pouvez utiliser deux éléments: un code> et un code>, ce dernier caché initialement. Lorsque l'utilisateur se concentre sur la zone de texte, cochez-vous simplement le champ Mot de passe et définissez la mise au point. Il pourrait devenir délicat de basculer entre eux. P>

Mise à jour h3>

Ceci est maintenant plus facile à accomplir dans les navigateurs modernes. Utilisez simplement quelque chose comme ceci (voici un jsfiddle ): p>

<input type="password" placeholder="Password" />

Ceci le fera

$('#clear').focus(function() {
    $('#clear').hide();
    $('#password_input').show().focus();
});
$('#password_input').blur(function() {
    if ($('#password_input').val() == '') {
        $('#clear, #password_input').toggle();
    }
});

<span>Password:</span>
<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />

 <script>

        function Changetxt() {
            if ($('#pwd').val() == "Enter Your Password Here") {
                $('#pwd').val('');
                $('#pwd').css('color', 'black');
            }
        }

        function textboxtype() {
            if ($('#pwd').val().length < 1) {
                $('#pwd').val('Enter Your Password Here');
                $('#pwd').css('color', 'gray');
            }
        }

    </script>

Les réponses ci-dessus sont partiellement erronées lorsqu'elles stiportent l'attribut type ne peut pas être modifiée. Oui, cela peut être changé via la méthode Prop / ATTR JQUERY. La chose est, elle est soutenue par tous les navigateurs mais c'est-à-dire

oui u peut.

Essayez ceci Ses travaux P>

<input type="text" class="pwd">
  $('.pwd').click(function(){
  $(this).get(0).type='password';
});

Vous pouvez toujours utiliser le pure JS comme: xxx

Peut avoir besoin d'afficher des informations de texte dans le champ Mot de passe apporté sur l'image, définie sur l'arrière-plan du champ de mot de passe et supprimé lorsque l'image de fond de la mise au point sur le champ de mot de passe, de manière à obtenir l'effet d'inviter l'utilisateur < / p>

J'ai rencontré un défi similaire récemment et je voudrais évaluer mon opinion. J'ai utilisé certaines des solutions ci-dessus et d'autres utilisateurs de JQuery (que j'aime beaucoup). Mais lorsque l'heure du test est venue, nous réalisons que les solutions via JQuery et ATT () ne fonctionne pas. Donc, je trouve la solution appropriée par pure JavaScript. xxx

et le opposé xxx