Skip to content

Instantly share code, notes, and snippets.

@jaywilliams

jaywilliams/example.html

Created July 25, 2011 20:07
Show Gist options
  • 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');
@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