Retrieve the "Placeholder" value with Javascript in IE without JQuery

Question

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();

}

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, Apr 24 '13 at 18:36
If you feel jQuery is too bulky, you could look into [Zepto.js](http://zeptojs.com/).. It's much lighter. — Ayush, Apr 24 '13 at 18:39
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, Apr 24 '13 at 18:47

Chase · Accepted Answer · 2013-04-24T18:42:15.887

13

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

edited Apr 24 '13 at 18:42

answered Apr 24 '13 at 18:37

Chase

29,019
1
49
48

@Chase but in IE8 for password type input the placeholder is showing as dots only..what to do in this case. – UI Dev Jun 18 '14 at 13:18
1

@RIADev - That's a tricky case, so you'll end up having to do something custom for those. You can find similar questions on SO, such as this: http://stackoverflow.com/questions/6052544/showing-placeholder-text-for-password-field-in-ie. However, IE8 is starting to finally be eased out, so it may be worth asking if it's an issue worth solving in your case. How many users does it affect and such? Is it worth making the change? etc, etc.. – Chase Jun 18 '14 at 17:29
@Chase But if customer says then they are the superusers....any way...i have found an solution thanks – UI Dev Jun 19 '14 at 05:37

Retrieve the "Placeholder" value with Javascript in IE without JQuery

1 Answers1

Linked