Modifica del tipo di <input> in IE con JavaScript

Question

La linea

<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" /> 

opere in tutti i browser web, ad eccezione di IE ... Come posso risolvere il problema per IE?

Ok apportato alcune modifiche per avere ancora un errore

voglio farlo funzionare in questo modo come qui

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

se io non inserire nulla si metterà il valore indietro

Così ho provato questo

<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> 

come si può vedere la sfocatura non funziona = [

ok finalmente ottenuto grazie all'aiuto necessario per rimuovere

passwordElement1.focus(); 

Answer 1

Non è possibile modificare dinamicamente un il tipo di un elemento di input in Internet Explorer.

Una possibile soluzione potrebbe essere quella di:

• creare dinamicamente un nuovo elemento.
• Copia le proprietà del vecchio elemento nel nuovo elemento.
• Imposta il tipo del nuovo elemento sul nuovo tipo.
• Quindi sostituire il vecchio elemento con il nuovo elemento.

Si consiglia di controllare il seguente articolo per un impianto di JavaScript di quanto sopra:

• Change Input Element Type using JavaScript

Un'altra opzione sarebbe quella di creare staticamente i due elementi, ma solo uno che ha visibile alla volta. La visibilità e l'attenzione dipendono dal valore degli elementi. In questo caso, si consiglia di utilizzare qualcosa di simile:

<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" /> 

Answer 2

terza opzione è quella di cambiare un nome di classe invece di un valore, e poi basta cambiare l'immagine bg sul fuoco, invece di tipo.

Answer 3

puoi farlo. Tuttavia, eseguendo una sostituzione sul outerhtml essenzialmente si ripete l'elemento, quindi qualsiasi attributo non definito esplicitamente nella dichiarazione del tag verrà dimenticato. Questo è il motivo per cui il valore del testo viene prima salvato in una variabile. A differenza di attr e puntello di jQuery, questo funziona in tutte le versioni di IE. Ho usato un vero IE10 e ho usato IETester per 5,5 a 9.

Here is a fiddle, codice qui sotto:

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; 
}