javascript - placeholder-not-working-for-internet-explorer 如果输入类型是密码，仍然显示 *********

Question

我在Placeholder not working for Internet Explorer得到了1个答案

我正在使用这段代码，

window.onload = function() { 
    var arrInputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
        var curInput = arrInputs[i]; 
        if (!curInput.type || curInput.type == "" || curInput.type == "text"|||| curInput.type == "password") 
            HandlePlaceholder(curInput); 
    } 
}; 



function HandlePlaceholder(oTextbox) { 
    if (typeof oTextbox.placeholder == "undefined") { 
        var curPlaceholder = oTextbox.getAttribute("placeholder"); 
        if (curPlaceholder && curPlaceholder.length > 0) { 
            oTextbox.value = curPlaceholder; 
            oTextbox.setAttribute("old_color", oTextbox.style.color); 
            oTextbox.style.color = "#c0c0c0"; 
            oTextbox.onfocus = function() { 
                this.style.color = this.getAttribute("old_color"); 
                if (this.value === curPlaceholder) 
                    this.value = ""; 
            }; 
            oTextbox.onblur = function() { 
                if (this.value === "") { 
                    this.style.color = "#c0c0c0"; 
                    this.value = curPlaceholder; 
                } 
            }; 
        } 
    } 
} 

那太好了，但现在我遇到了一个问题，它显示的是 ******** 特殊符号，而不是显示“密码”，有什么办法可以解决这个问题

Answer 1

解决这个问题的唯一方法是使用另一个元素(隐藏原始元素，或者在上面放置一个新元素)。不幸的是，Internet Explorer 不允许您更改 input 元素的 type 属性。此代码(来 self 的 placeholder polyfill， Placeholders.js )演示了该问题:

if (element.type === "password") {
    // The `type` property is read-only in IE < 9, so in those cases we just move on. The placeholder will be displayed masked
    try {
        element.type = "text";
        element.setAttribute("data-placeholdertype", "password");
    } catch (e) {}
}

这意味着我们可以很好地支持除IE之外的所有浏览器。除非你想创建一个新元素(这不是我想要在 polyfill 中采用的路线)，否则我担心你将不得不忍受它。