-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
36 lines (36 loc) · 1.5 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iOS Placeholder jQuery Plugin</title>
<link rel="stylesheet" href="normalise.css"></link>
<link rel="stylesheet" href="ios-placeholder.css"></link>
<style>
body {
width: 751.538px;
margin: 0 auto;
font-family: sans-serif;
line-height: 1.4;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="ios-placeholder.jquery.js"></script>
<script>
$(function(){
$('.ios').iosPlaceholder();
});
</script>
</head>
<body>
<h1>iOS-style Placeholder jQuery Plugin</h1>
<p>Inspired by Robert Nyman in his <a href="http://robertnyman.com/2011/05/02/html5-placeholder-and-an-alternative-approach-introducing-roberts-playground/">alternative approach to the HTML5 placeholder behaviour</a>, and Recurly's <a href="https://js.recurly.com/examples/">nice form examples</a>, this plugin aims to mimic the behaviour of the placeholder behaviour on iOS form fields i.e. keep the placeholder text on focus, and only remove upon entering text.</p>
<p>Apparently the iOS behaviour is now used in OS X Lion, so if you're using Lion, you probably won't see much difference in the demos below.</p>
<div style="margin-bottom: 1em;">
<input type="text" placeholder="Standard placeholder behaviour" />
</div>
<div>
<input class="ios" type="text" placeholder="iOS behaviour" />
</div>
<p>Contribute on <a href="https://github.com/domchristie/ios-placeholder/">GitHub</a></p>
</body>
</html>