I have some Javascript code that checks if a browser supports Placeholders and if it doesn't it creates them itself. Now this works on some older browsers but not all, especially IE.

All I need to do it get the "Placeholder" value, at the moment the placeholder in IE9 is "undefined".

Here is my code:

//Test if Placeholders are supported
var test = document.createElement("input");
if ("placeholder" in test) {
  var testholder = true;
  }
else {
  var testholder = false;
  }

//Fix unsupported placeholders
function placeHolder(id)
{
var demo = document.getElementById(id);

    demo.className = "fix-hint";
    demo.value = demo.placeholder;

    demo.onfocus = function()
    {
        if (this.className == "fix-hint")
        { 
        this.value = ""; this.className = "fix-nohint"; 
        }
    };

    demo.onblur = function()
    {
        if (this.value === "")
        { 
        this.className = "fix-hint"; this.value = demo.placeholder; 
        }
    };
    return false;

} I am using 0% Jquery, I feel it's too bulky to solve small problems, plus I want to learn pure Javascript. Modernizr is a no too although I may come round to using it at some point.

UPDATE

This is the working code. Tested in IE 8 and 9. (The function call is within an if/else for "placeSupport".)

//Check if placeholders are supported

placeholderSupport = ("placeholder" in document.createElement("input"));
if(!placeholderSupport){
  var placeSupport = false;
}else{
    var placeSupport = true;}

//Support placeholders in older browsers

function placeHolder (id)
{
var el = document.getElementById(id);
var placeholder = el.getAttribute("placeholder");

el.onfocus = function ()
{
    if(this.value == placeholder)
    {
        this.value = '';
        this.className = "fix-nohint";
    }
};

el.onblur = function ()
{
    if(this.value.length == 0)
    {
        this.value = placeholder;
        this.className = "fix-hint";
    }
};

el.onblur();

}

I have some Javascript code that checks if a browser supports Placeholders and if it doesn't it creates them itself. Now this works on some older browsers but not all, especially IE.

All I need to do it get the "Placeholder" value, at the moment the placeholder in IE9 is "undefined".

Here is my code:

//Test if Placeholders are supported
var test = document.createElement("input");
if ("placeholder" in test) {
  var testholder = true;
  }
else {
  var testholder = false;
  }

//Fix unsupported placeholders
function placeHolder(id)
{
var demo = document.getElementById(id);

    demo.className = "fix-hint";
    demo.value = demo.placeholder;

    demo.onfocus = function()
    {
        if (this.className == "fix-hint")
        { 
        this.value = ""; this.className = "fix-nohint"; 
        }
    };

    demo.onblur = function()
    {
        if (this.value === "")
        { 
        this.className = "fix-hint"; this.value = demo.placeholder; 
        }
    };
    return false;

} I am using 0% Jquery, I feel it's too bulky to solve small problems, plus I want to learn pure Javascript. Modernizr is a no too although I may come round to using it at some point.

UPDATE

This is the working code. Tested in IE 8 and 9. (The function call is within an if/else for "placeSupport".)

//Check if placeholders are supported

placeholderSupport = ("placeholder" in document.createElement("input"));
if(!placeholderSupport){
  var placeSupport = false;
}else{
    var placeSupport = true;}

//Support placeholders in older browsers

function placeHolder (id)
{
var el = document.getElementById(id);
var placeholder = el.getAttribute("placeholder");

el.onfocus = function ()
{
    if(this.value == placeholder)
    {
        this.value = '';
        this.className = "fix-nohint";
    }
};

el.onblur = function ()
{
    if(this.value.length == 0)
    {
        this.value = placeholder;
        this.className = "fix-hint";
    }
};

el.onblur();

}

• javascript
• internet-explorer

• As your project grows you'll realize the amount of time jQuery saved for you (that is if you are using it) vs otherwise. – techfoobar Commented Apr 24, 2013 at 18:36
• 1 If you feel jQuery is too bulky, you could look into Zepto.js.. It's much lighter. – Ayush Commented Apr 24, 2013 at 18:39
• 1 And don't write code like if ("placeholder" in test) { var testholder = true; } else { var testholder = false; } You'll find var testholder = ("placeholder" in test) does the same thing. – Michael Lorton Commented Apr 24, 2013 at 18:47

1 Answer 1

If you're not sure if you're able to use certain functionality/attributes, try caniuse.com - you'll notice that placeholder is not available in IE9.

Try using getAttribute("placeholder")

getAttribute() returns the value of the named attribute on the specified element. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.

EXAMPLE

HTML

<input id="demo" placeholder="Rawr" />

JavaScript

var placeholder = document.getElementById("demo").getAttribute("placeholder");
console.log(placeholder);