在IE更改<input>型用JavaScript

Question

線

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

作品除了IE以外的Web瀏覽器...我如何解決它的IE瀏覽器？

好做了一些改動還是有錯誤

我希望它這樣的工作就像在這裏

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

，如果我不輸入任何東西它會把值回

所以我試過這個

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

你可以看到模糊不起作用= [

OK終於得到它得益於刪除

passwordElement1.focus(); 

Answer 1

不能動態地更改Internet Explorer中的輸入元素的類型所需要的幫助。

一個可能的解決辦法是：

• 動態創建一個新的元素。
• 將舊元素的屬性複製到新元素中。
• 將新元素的類型設置爲新類型。
• 然後用新元素替換舊元素。

您可能要檢查下面的文章對上述的一個JavaScript注入：

• Change Input Element Type using JavaScript

另一種選擇是靜態創建兩個元素，但只有一個一次可見。能見度和焦點將取決於元素的價值。在這種情況下，您可能希望使用這樣的事：

<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

第三個選項是改變類的名稱，而不是一個值，然後只是改變焦點的背景圖片，而不是類型。

Answer 3

你可以這樣做。但是，在externalhtml上進行替換實質上會重新聲明該元素，因此任何未在標籤聲明中明確定義的屬性都將被遺忘。這就是爲什麼文本值先保存到變量中的原因。與jQuery的attr和prop不同，這適用於所有版本的IE。我使用了真正的IE10，並且我使用IETester 5.5到9。

Here is a fiddle，下面的代碼：

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