Skip to content

Instantly share code, notes, and snippets.

@jaywilliams

jaywilliams/example.html

Created July 25, 2011 20:07
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save jaywilliams/1105055 to your computer and use it in GitHub Desktop.
Save jaywilliams/1105055 to your computer and use it in GitHub Desktop.
Download ZIP
IE Placeholder: A no-dependancy quick and dirty method of adding basic placeholder functionality to Internet Explorer 5.5+
Raw
example.html
<html>
<head>
<title>IE Placeholder Text</title>
</head>
<body>
<input type="text" name="myInputField" value="" placeholder="HTML5 Placeholder Text" id="myInputField">
<!--[if IE]>
<script type="text/javascript">
// A no-dependancy quick and dirty method of adding basic
// placeholder functionality to Internet Explorer 5.5+
// Author: Jay Williams <myd3.com>
// License: MIT License
// Link: https://gist.github.com/1105055
function add_placeholder (id, placeholder)
{
var el = document.getElementById(id);
el.placeholder = placeholder;
el.onfocus = function ()
{
if(this.value == this.placeholder)
{
this.value = '';
el.style.cssText = '';
}
};
el.onblur = function ()
{
if(this.value.length == 0)
{
this.value = this.placeholder;
el.style.cssText = 'color:#A9A9A9;';
}
};
el.onblur();
}
// Add right before </body> or inside a DOMReady wrapper
add_placeholder('myInputField', 'IE Placeholder Text');
</script>
<![endif]-->
</body>
</html>
Raw
placeholder.js
// A no-dependancy quick and dirty method of adding basic
// placeholder functionality to Internet Explorer 5.5+
// Author: Jay Williams <myd3.com>
// License: MIT License
// Link: https://gist.github.com/1105055
function add_placeholder (id, placeholder)
{
var el = document.getElementById(id);
el.placeholder = placeholder;
el.onfocus = function ()
{
if(this.value == this.placeholder)
{
this.value = '';
el.style.cssText = '';
}
};
el.onblur = function ()
{
if(this.value.length == 0)
{
this.value = this.placeholder;
el.style.cssText = 'color:#A9A9A9;';
}
};
el.onblur();
}
// Add right before </body> or inside a DOMReady wrapper
add_placeholder('myInputField', 'IE Placeholder Text');
@gbluma
Copy link

gbluma commented Nov 10, 2011

Hey, just wanted to say that I found this useful. Thanks for posting it. I found one caveat that I noticed, which you might be interested in too.

Using this function, as is, overrides the existing HTML5 placeholder functionality. This isn't noticeable for most things except for password fields it shows "*******" instead of "Enter password".

I added the following function to check for placeholder support:

function isPlaceholderSupported() 
{
    var input = document.createElement("input");
    return ('placeholder' in input); 
}

and then used your function only on browsers that don't have support.

Thanks again!

@jaywilliams
Copy link
Author

jaywilliams commented Nov 10, 2011 via email

@vegastriguy
Copy link

Thanks a bunch for this.....this was my first time working with placeholder in a form and your script was the only one that truly worked in IE. YAY! 'Preciate your posting...

@jaywilliams
Copy link
Author

Thanks, Robert. Older versions of Internet Explorer can be a real pain at times, so I'm glad my little script helped save you some frustration.

@bidochko
Copy link

Here's a solution to mask password input by overlaying 'label' HTML element on them. You may need to tweak placeholderLabel CSS style (margin-right) to position label properly based on your layout:

<html>
<head>
    <title>IE Placeholder Text</title>


<style type="text/css">
.placeholderLabel {
margin-right: -150px;
display: inline-block;
position:relative;
padding-left: 5px;
color:#A9A9A9;
}
</style>

<script type="text/javascript">
function onLoad () {
}
</script>

<!--[if IE]>
<script type="text/javascript">
// A no-dependancy quick and dirty method of adding basic
// placeholder functionality to Internet Explorer 5.5+
// Author: Jay Williams <myd3.com>
// License: MIT License
// Link: https://gist.github.com/1105055

function add_placeholder (id, placeholder)
{
    var el = document.getElementById(id);
    var isPassword = (el.type == 'password');
    if (isPassword) 
    {
        var passwordValue = el.value;
        var passwordLabel = document.createElement('label');
        passwordLabel.innerHTML = placeholder;
        passwordLabel.className = 'placeholderLabel';
        passwordLabel.htmlFor = id;
        var parent = el.parentNode;
        var insertedElement = parent.insertBefore(passwordLabel, el);       
    }

    el.placeholder = placeholder;

    el.onfocus = function ()
    {
        if (isPassword) {
            passwordLabel.style.display = 'none';
        }
        else if(this.value == this.placeholder)
        {
            this.value = '';
            el.style.cssText  = '';
        }
    };

    el.onblur = function ()
    {
        if(this.value.length == 0)
        {
            if (isPassword) 
            {
                passwordLabel.style.display = 'inline-block';
                passwordLabel.innerHTML = this.placeholder;
            }
            else 
            {
                this.value = this.placeholder;
                el.style.cssText = 'color:#A9A9A9;';
            }
        }
    };

    el.onblur();
}

function onLoad () {
add_placeholder('myInputField', 'Enter Your User Name');
add_placeholder('passwordInput', 'Enter Your Password');
}
</script>
<![endif]-->

</head>

<body onLoad="onLoad();">

<input type="text" name="myInputField" value="" placeholder="Enter Your User Name" id="myInputField">
<input type="password" name="passwordInput" value="" placeholder="Enter Your Password" id="passwordInput">

</body>
</html>

@paulmaloney
Copy link

I just noticed that it will submit the default fields, anyone know how I could prevent this? Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment