web-dev-qa-db-fra.com

changer le type d'entrée html par JS?

Comment faire grâce à la balise elle-même changer le type de texte en mot de passe

<input type='text' name='pass'  />

Est-il possible d'insérer JS à l'intérieur de la balise d'entrée elle-même pour changer type = 'text' en type = 'password'?

javascripthtmlinput
30
user1150271

Essayer:

<input id="hybrid" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('hybrid').type = 'password';
</script>
24
deed02392

Modification du type d'un <input type=password> génère une erreur de sécurité dans certains navigateurs (anciennes versions IE et Firefox).

Vous devrez créer un nouvel élément input, définir son type sur celui que vous souhaitez et cloner toutes les autres propriétés de celle existante.

Je le fais dans mon plugin d'espace réservé jQuery: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

Pour travailler dans Internet Explorer:

  • créer dynamiquement un nouvel élément
  • copier les propriétés de l'ancien élément dans le nouvel élément
  • définissez le type du nouvel élément sur le nouveau type
  • remplacer l'ancien élément par le nouvel élément

La fonction ci-dessous accomplit les tâches ci-dessus pour vous:

<script>
function changeInputType(oldObject, oType) {
    var newObject = document.createElement('input');
    newObject.type = oType;
    if(oldObject.size) newObject.size = oldObject.size;
    if(oldObject.value) newObject.value = oldObject.value;
    if(oldObject.name) newObject.name = oldObject.name;
    if(oldObject.id) newObject.id = oldObject.id;
    if(oldObject.className) newObject.className = oldObject.className;
    oldObject.parentNode.replaceChild(newObject,oldObject);
    return newObject;
}
</script>
11
Mathias Bynens

Voici ce que j'ai pour le mien.

Essentiellement, vous utilisez les commandes onfocus et onblur dans la balise pour déclencher le javascript approprié. Cela pourrait être aussi simple que:

<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>

Une version évoluée de cette fonctionnalité de base vérifie et vide la chaîne et renvoie la saisie du mot de passe au "mot de passe" d'origine en cas de zone de texte nulle:

    <script type="text/javascript">
        function password_set_attribute() {
            if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" || document.getElementsByName[0].value == null) {
                document.getElementsByName("login_text_password")[0].setAttribute('type','text')
                document.getElementsByName("login_text_password")[0].value = 'Password';
            }
            else {
                document.getElementsByName("login_text_password")[0].setAttribute('type','password')
            }
        }
    </script>

Où HTML ressemble:

<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>
3
Sventek
$(".show-pass").click(function (e) {
    e.preventDefault();
    var type = $("#signupform-password").attr('type');
    switch (type) {
        case 'password':
        {
            $("#signupform-password").attr('type', 'text');
            return;
        }
        case 'text':
        {
            $("#signupform-password").attr('type', 'password');
            return;
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">
0
user10232651

Ce n'est pas pris en charge par certains navigateurs (IE si je me souviens bien), mais cela fonctionne dans le reste:

document.getElementById("password-field").attributes["type"] = "password";

ou

document.getElementById("password-field").attributes["type"] = "text";
0
Evert

J'ai dû ajouter un ".value" à la fin du code d'Evert pour le faire fonctionner.

Je l'ai également combiné avec une vérification du navigateur afin que le champ de saisie type = "number" soit changé en type = "text" dans Chrome puisque 'formnovalidate' ne semble pas fonctionner en ce moment.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";
0
squarcle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
    document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
    document.getElementById("password-field".focus();
}
</script>
</head>

<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />

</body>
</html>
0
Karan Shah

Oui, vous pouvez même le changer en déclenchant un événement

<input type='text' name='pass'  onclick="(this.type='password')" />
0
Srinath