Thay đổi kiểu <input> trong IE với JavaScript

Question

Dòng

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

công trình trong tất cả các trình duyệt web IE trừ ... Làm thế nào tôi có thể sửa chữa nó cho IE?

Ok thực hiện một số thay đổi để vẫn có một lỗi

Tôi muốn nó hoạt động như thế này như đây

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

nếu tôi không nhập bất cứ điều gì nó sẽ đưa các giá trị trở lại

Vì vậy, tôi đã thử điều này

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

vì bạn có thể thấy làm mờ không hoạt động = [

ok cuối cùng đã nhận nó nhờ vào sự giúp đỡ cần thiết để loại bỏ

passwordElement1.focus(); 

Answer 1

Bạn không thể tự động thay đổi một kiểu của một yếu tố đầu vào trong Internet Explorer.

Một workaround có thể sẽ được:

• động tạo ra một nguyên tố mới.
• Sao chép các thuộc tính của phần tử cũ vào phần tử mới.
• Đặt loại phần tử mới thành loại mới.
• Sau đó thay thế phần tử cũ bằng phần tử mới.

Bạn có thể muốn kiểm tra các bài viết sau đây cho một cấy JavaScript của trên:

• Change Input Element Type using JavaScript

Một lựa chọn khác sẽ được tĩnh tạo ra hai yếu tố, nhưng chỉ có một có hiển thị tại một thời điểm. Khả năng hiển thị và tiêu điểm sẽ phụ thuộc vào giá trị của các phần tử. Trong trường hợp này, bạn có thể muốn sử dụng một cái gì đó như thế này:

<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

Tùy chọn thứ ba là thay đổi tên lớp thay vì giá trị, sau đó chỉ thay đổi hình ảnh bg trên tiêu điểm, thay vì nhập.

Answer 3

bạn có thể thực hiện việc này. Tuy nhiên, việc thay thế phần tử bên ngoài về cơ bản lại tuyên bố phần tử, vì vậy bất kỳ thuộc tính nào không được xác định rõ ràng trong khai báo thẻ sẽ bị lãng quên. Đó là lý do tại sao giá trị văn bản được lưu vào một biến đầu tiên. Không giống như attr và prop của jQuery, điều này làm việc trong tất cả các phiên bản của IE. Tôi đã sử dụng IE10 thực, và tôi đã sử dụng IETester từ 5.5 đến 9.

Here is a fiddle, mã bên dưới:

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