1,105,281 Community Members

Placeholder not working

Member Avatar
garyjohnson
Junior Poster
168 posts since Aug 2012
Reputation Points: 14 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

I have javascript code with displays the placeholder attributes on browsers which dont support HTML5, I am testing the code in IE. It works on every field which is type text. But when its type"password" it displays the placeholder as a password and not text. I need to it show text

`

var _debug = false;
var _placeholderSupport = function() {
    var t = document.createElement("input");
    t.type = "text";
    return (typeof t.placeholder !== "undefined");
}();

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 (!_placeholderSupport) {
        var curPlaceholder = oTextbox.getAttribute("placeholder");
        if (curPlaceholder && curPlaceholder.length > 0) {
            Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder);
            oTextbox.value = curPlaceholder;
            oTextbox.setAttribute("old_color", oTextbox.style.color);
            oTextbox.style.color = "#c0c0c0";
            oTextbox.onfocus = function() {
                Debug("input box '" + this.name + "' focus");
                this.style.color = this.getAttribute("old_color");
                if (this.value === curPlaceholder)
                    this.value = "";
            };
            oTextbox.onblur = function() {
                Debug("input box '" + this.name + "' blur");
                if (this.value === "") {
                    this.style.color = "#c0c0c0";
                    this.value = curPlaceholder;
                }
            };
        }
        else {
            Debug("input box '" + oTextbox.name + "' does not have placeholder attribute");
        }
    }
    else {
        Debug("browser has native support for placeholder");
    }
}

function Debug(msg) {
    if (typeof _debug !== "undefined" && _debug) {
        var oConsole = document.getElementById("Console");
        if (!oConsole) {
            oConsole = document.createElement("div");
            oConsole.id = "Console";
            document.body.appendChild(oConsole);
        }
        oConsole.innerHTML += msg + "<br />";
    }
}

`

LastMitch
Deleted Member
 
0
 

@garyjohnson

I have javascript code with displays the placeholder attributes on browsers which dont support HTML5, I am testing the code in IE. It works on every field which is type text. But when its type"password" it displays the placeholder as a password and not text. I need to it show text

How does your <input> tags look like?

Read this regarding about HTML5 placeholder:

http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: