rucksack-css
Version:
A little bag of CSS superpowers
138 lines (118 loc) • 6.16 kB
HTML
<html>
<head>
<title>HTML5 placeholder polyfill</title>
<!-- DEMO styles. Only needed for this Example. Not pretty... -->
<link rel="stylesheet" href="demo.css">
<!-- include the default Javascript (jQuery and Modernizr) -->
<script src="../libs/modernizr-2.0.6.min.js" charset="utf-8"></script>
<script src="../libs/jquery-1.6.2.min.js" charset="utf-8"></script>
</head>
<body>
<ul id="nav">
<li><a href="index.html">Basic Example</a></li>
<li><strong>Example using Modernizr</strong></li>
<li><a href="index-chromeish.html">Example that hides on type instead on focus</a></li>
<li><a href="index-force.html">Example that runs the polyfill in all Browsers</a></li>
</ul>
<h1>HTML5 Placeholder Polyfill Examples</h1>
<p>The Placeholder Attribute has decent support across current Browsers. This Script adds support for the older generations including:</p>
<ul id="browserlist">
<li>Internet Explorer < 10</li>
<li>Firefox < 4.0</li>
<li>Safari < 4.0</li>
<li>iOS Safari < 4.0</li>
<li>Android Browser < 2.0</li>
</ul>
<p>for more details on native support see the Browser suppport table at <a href="http://caniuse.com/#search=placeholder">caniuse.com</a></p>
<h2>Update Placeholder Attribute</h2>
<form>
<label for="updatetest">Some Number:</label>
<input placeholder="e.g. 42" type="text" name="updatetest" id="updatetest">
<button id="updatetestbutton" type="button">alert current Placeholder and change it</button>
</form>
<h2>Form Elements with explicit labels (using id and for)</h2>
<form>
<label for="firstname">Firstname:</label>
<input placeholder="e.g. Jeff" type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Lastname:</label>
<input placeholder="e.g. Lebowski" type="text" name="lastname" id="lastname">
<br>
<label for="street">Street:</label>
<input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street" id="street">
<br>
<label for="password">password:</label>
<input placeholder="e.g. the Dude" type="password" name="password" id="password">
<br>
<label for="message">Message:</label>
<textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" id="message" rows="2"></textarea>
<br>
<input type="submit" value="send">
</form>
<h2>Form Element with visually hidden label (i.e. for search boxes)</h2>
<h3>Using the "visuallyhidden" class from i.e. HTML5 Boilerplate</h3>
<p>HTML5 Boilerplate uses a way to visually hide elements that makes it impossible for containing elements (like the polyfilled Placeholder) to be visible. To make it work anyway the Polyfill changes said technique (only for labels) with a technique that is less obstrusive but still hides them.</p>
<form>
<label class="visuallyhidden" for="search2">Search:</label>
<input placeholder="e.g. Yourself..." type="text" name="search" id="search2">
<input type="submit" value="search">
</form>
<h3>Using the oldschool "offscreen" class (pushing the element to the far left using position:absolute)</h3>
<form>
<label class="offscreen" for="search">Search:</label>
<input placeholder="e.g. Yourself..." type="text" name="search" id="search">
<input type="submit" value="search">
</form>
<h2>Form Elements with implicit labels (wrapping the form element into the label)</h2>
<form class="implicit">
<label>Firstname:
<input placeholder="e.g. Jeff" type="text" name="firstname">
</label>
<br>
<label>Lastname:
<input placeholder="e.g. Lebowski" type="text" name="lastname">
</label>
<br>
<label>Street:
<input placeholder="e.g. 1000 main str and quite some extra text so it doesn't fit inside of the field" type="text" name="street">
</label>
<br>
<label>password:
<input placeholder="e.g. the Dude" type="password" name="password">
</label>
<br>
<label>Message:
<textarea placeholder="e.g. Well, sir, it's this rug I had. It really tied the room together." name="message" rows="2"></textarea>
</label>
<br>
<input type="submit" value="send">
</form>
<!-- this is where the Magic happens — we feature test for placeholder support and load the polyfill if needed -->
<script type="text/javascript" charset="utf-8">
// remove/add the second slash in the following line to toggle between production and dev block
Modernizr.load({
test: Modernizr.input.placeholder,
nope: [
'../libs/onfontresize.jquery.min.js', // optional
'../libs/jquery.ba-resize.min.js', // optional
'../src/placeholder_polyfill.css',
'../src/placeholder_polyfill.jquery.js', // this and the css above are the only required files
]
});
</script>
<!-- ignore from here on -->
<a href="https://github.com/ginader/HTML5-placeholder-polyfill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<!-- DEMO JS Only needed for this Example. Not needed -->
<script src="demo.js" charset="utf-8"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-299719-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>