La modification de la <input> tapez dans IE avec JavaScript

Ce code ci-dessous fonctionne dans tous les navigateurs sauf IE:

<input type="text" name="passwordLogin" value="Password" onfocus="if(this.value=='Password'){this.value=''; this.type='password'};" onblur="if(this.value==''){this.value='Password'; this.type='text'};" size="25" />

Comment puis-je résoudre ce problème pour IE?

J'ai fait quelques modifications, mais il a encore une erreur.

Je veux qu'il fonctionne comme ceci, comme ici:

<input type="text" name="usernameLogin" value="Email" onfocus="if(this.value=='Email'){this.value=''};" onblur="if(this.value==''){this.value='Email'};" size="25" />

si je ne saisissez rien il va mettre la valeur de retour.

J'ai donc essayé ceci:

<td colspan="2" id="passwordLoginTd">
     <input id="passwordLoginInput1" type="text" name="passwordLogin" value="Password" onfocus="passwordFocus()" size="25" />
     <input id="passwordLoginInput2" style="display: none;" type="password" name="passwordLogin" value="" onblur="passwordBlur()" size="25" />
    </td>
    <script type="text/javascript">
    //<![CDATA[

     passwordElement1 = document.getElementById('passwordLoginInput1');
     passwordElement2 = document.getElementById('passwordLoginInput2');

     function passwordFocus() {

      passwordElement1.style.display = "none";
      passwordElement2.style.display = "inline";
      passwordElement2.focus();

     }

     function passwordBlur() {

      if(passwordElement2.value=='') {

       passwordElement2.style.display = "none";
       passwordElement1.style.display = "inline";
       passwordElement1.focus();

      }

     }

    //]]>
    </script>

comme vous pouvez le voir, le flou ne fonctionne pas.

Enfin je l'ai eu, je devais enlever:

passwordElement1.focus();

OriginalL'auteur MrEnder | 2010-04-02

  1. 8

    Vous ne pouvez pas modifier dynamiquement le type d'un élément d'entrée dans Internet Explorer.

    Une solution possible serait de:

    • Créer dynamiquement un nouvel élément.
    • Copier les propriétés de l'ancien élément dans l'élément nouveau.
    • Définir le type de l'élément nouveau pour le nouveau type.
    • Puis remplacez le vieux élément avec le nouvel élément.

    Vous pouvez consulter l'article suivant pour un JavaScript à l'implantation de la ci-dessus:

    Une autre option serait de statiquement créer les deux éléments, mais n'ayant qu'un seul visible à un moment donné. La visibilité et l'objectif dépendra de la valeur des éléments. Dans ce cas, vous pouvez utiliser quelque chose comme ceci:

    <script type="text/javascript">   
  function checkType() {
     var thisElement = document.getElementById('field_text');
     var otherElement = document.getElementById('field_password');

     if (thisElement.value === 'Password') {            
        otherElement.style.display = 'inline';
        thisElement.style.display = 'none';
        otherElement.focus();
     }
  }
</script>

<input type="text" value="Password" id="field_text" onfocus="checkType();" />
<input type="password" value="" style="display: none;" id="field_password" />
    dang c'est ce que j'avais avant et on m'a dit que c'était mal =[ grr =[
    Travaille dans IE9 et au-dessus.

    OriginalL'auteur Daniel Vassallo

  2. 11

    vous pouvez le faire. Cependant, en faisant un remplacement sur le outerhtml essentiellement déclare à nouveau l'élément, de sorte que tout attribut non défini de façon explicite dans la balise de déclaration sera oublié. C'est pourquoi la valeur du texte est enregistré dans une variable de première. À la différence de jQuery attr et prop, cela fonctionne dans toutes les versions d'IE. J'ai utilisé un réel IE10, et j'ai utilisé IETester 5,5 à 9.

    Voici un violon, code ci-dessous:

    HTML

    <input id="myinput" type="password">
<input value="transform" id="transformButton" type="button">

    JS

    //attach a click handler to the button to make it transform 
//when clicked, via our transform() function below
document.getElementById('transformButton').addEventListener("click", transform);

//flag of whether or not it is a password field or text field
var isPassword = true;
//this function will toggle the input between being a password or a text input
function transform() {
    //copy the element itself, its html source, and value text to a variable
    var myInput = document.getElementById("myinput");
    var oldHtml = myInput.outerHTML;
    var text = myInput.value;
    if (isPassword)
    {
        //replace "password" with "text" in the html if it is a password field
        var newHtml = oldHtml.replace(/password/g, "text");
    }
    else
    {
        //replace "text" with "password" if it is a text field
        newHtml = oldHtml.replace(/text/g, "password");
    }
    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById("myinput");
    myInput.value = text;
    //toggle the isPassword flag
    isPassword = !isPassword;
}
    IE9 et ci-dessus vous permettra de changer le type de l'attribut directement.
    Cela fonctionne même sous IE 8.Pourquoi cette réponse est tellement peu d'upvotes?
    INCROYABLE réponse, GRANDE mentale régime, frère. Je suis d'accord avec @JrChen, cette réponse devrait être plusieurs centaines de pouces vers le haut. J'ai ajouté ce, de sorte que vous pouvez passer avec une case à cocher "afficher/masquer le mot de passe": si(oldHtml.indexOf("\"mot de passe\"")>-1) { newHtml=oldHtml.replace("\"mot de passe\"","\"text\""); } else { newHtml=oldHtml.replace("\"text\"","\"mot de passe\""); } Merci, chiliNUT.

    OriginalL'auteur chiliNUT

  3. -1

    Troisième option consiste à modifier un nom de classe au lieu d'une valeur, et alors il suffit de changer le bg de l'image sur l'accent, à la place du type.

    OriginalL'auteur Arx Poetica

  4. -2

    Vous pouvez utiliser le code ci-dessous pour modifier le <input> type dans IE avec JavaScript:

    <html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=5" />

<script>

//this function will toggle the input between being a password or a text input
function transform(srcc,status) {


    //copy the element itself, its html source, and value text to a variable
    var myInput = document.getElementById(srcc.id);
    var oldHtml = myInput.outerHTML;
    var text = myInput.value;
    if (status=="click")
    {
        //replace "password" with "text" in the html if it is a password field
        var newHtml = oldHtml.replace(/password/g, "text");

    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById(srcc.id);
    myInput.value = text;   
    document.getElementById(srcc.id).focus();
    }
    else
    {
        //replace "text" with "password" if it is a text field      
var newHtml = '<input id='+srcc.id+' type="password" value="cc" onclick="transform(this,\'click\');"  onblur="transform(this,\'blur\');" onmouseout="transform(this,\'mouseout\');">';


    //update the html
    myInput.outerHTML = newHtml;
    //restore the text value
    myInput = document.getElementById(srcc.id);
    myInput.value = text;
    }

}
</script>
</head>

<body>
 <input id="myinput" type="password" value="cc" onclick="transform(this,'click');"  onblur="transform(this,'blur');" onmouseout="transform(this,'mouseout');">
</body>

</html>
    Pouvez-vous expliquer ce que cet extrait?

    OriginalL'auteur user1373314