public
Last active

Example code for

  • Download Gist
application.js
JavaScript
1 2 3 4 5 6 7 8 9
$(window).load(function(){
if (!Modernizr.input.placeholder){
$('input').supportPlaceHolder();
}
 
if (!Modernizr.textarea.placeholder){
$('textarea').supportPlaceHolder();
}
});
detecting-from-the-console.js
JavaScript
1 2 3
var t = document.createElement('textarea'); // #=> <textarea></textarea>
 
(t.placeholder !== undefined); // #=> true || false
feature-detection.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11
// http://github.com/Modernizr/Modernizr/issues#issue/76
var textareaSupport = function(){
var support = {},
t = document.createElement('textarea');
 
support.placeholder = (t.placeholder !== undefined);
 
return support;
};
 
Modernizr.textarea = textareaSupport();
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
 
<title>HTML5 placeholder example</title>
 
<style type="text/css" media="screen">
body {
padding: 0 1.125em;
}
 
h1, h2 {
text-align: center;
}
 
hr {
border: 2px solid black;
}
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript" src="feature-detection.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script type="text/javascript" src="application.js"></script>
</head>
 
<body>
<div id="header">
<h1>Placeholder attribute</h1>
</div>
 
<div id="content">
<form id="search-form" method="get">
<input type="text" placeholder="Search Users" name="search-users" />
 
<input name="commit" value="Search" type="submit" />
</form>
</div>
 
<div id="footer">
 
</div>
</body>
</html>
initial-placeholder-implementation.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
if (!Modernizr.input.placeholder){
$('input').each(function(i){
$(this).val($(this).attr('placeholder'));
 
$(this).focus(function(e){
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
 
$(this).blur(function(e){
if ($(this).val() === '') {
$(this).val($(this).attr('placeholder'));
}
});
});
 
$('form').submit(function(e){
$(this).find('input').each(function(i){
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
}
jquery.placeholder.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
$.fn.supportPlaceHolder = function(){
return this.each(function(){
var element = this;
 
$(element).each(function(i){
$(this).val($(this).attr('placeholder'));
 
$(this).focus(function(e){
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
 
$(this).blur(function(e){
if ($(this).val() === '') {
$(this).val($(this).attr('placeholder'));
}
});
});
 
$('form').submit(function(e){
$(this).find(element).each(function(i){
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
});
}
placeholder-example.html
HTML
1 2 3 4 5
<form id="search-form" method="get">
<input type="text" placeholder="Search Users" name="search-users" />
 
<input name="commit" value="Search" type="submit" />
</form>
using-modernizr.js
JavaScript
1 2 3
if (!Modernizr.input.placeholder){
// placeholder implementation here
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.