jaz303 / jquery-grab-bag
watch download tarball
public
Forks6Right
Watchers36Right
Description: Miscellaneous small jQuery plugins
Homepage: http://onehackoranother.com/projects/jquery/jquery-grab-bag/
Clone URL: git://github.com/jaz303/jquery-grab-bag.git
jquery-grab-bag / input-hint.html
100644 94 lines (78 sloc) 3.785 kb
raw blame history 
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>jQuery Grab Bag - Input Hint Plugin</title>
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://onehackoranother.com/feed/" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="http://onehackoranother.com/feed/rss/" />
    <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="http://onehackoranother.com/feed/atom/" />
    <script type='text/javascript' src='javascripts/jquery-1.2.6.min.js'></script>
    <script type='text/javascript' src='javascripts/jquery.input-hint.js'></script>
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css" />
    <style type='text/css'>
      .hint { color: #808080; }
      #test-form-1,
      #test-form-2 { border: 1px solid #a0a0a0; padding: 0.5em; background-color: #f0f0f0; margin-bottom: 1em; }
    </style>
    <script type='text/javascript'>
      $(function() {
        $('#test-form-1 *[title]').inputHint();
        $('#test-form-2 input[type=text]').inputHint({using: '+ kbd'});
      });
    </script>
  </head>
  <body>
    <div id='container'>
      
      <h1>
        grab bag <span class='subtitle'>- assorted jQuery plugins</span>
      </h1>
      
      <div id='sidebar'>
        <ul id='project-nav'>
          <li><a href='index.html'>Plugin List</a></li>
        </ul>
        <ul id='ohoa-nav'>
          <li><a href='http://onehackoranother.com/feed/' id='subscribe'>Subscribe for updates &raquo;</a></li>
          <li><a href='http://onehackoranother.com/projects/'>Back to projects &raquo;</a></li>
          <li><a href='http://onehackoranother.com/'>Back to onehackoranother.com &raquo;</a></li>
        </ul>
      </div>
      
      <div id='main'>
        
        <h2>Input Hint</h2>
        
        <p>
          Display input hints to users within a text input and remove them automatically
          on focus/form submission. The hint text for each input can be supplied by
          assigning it to the standard XHTML <code>title</code> attribute, or by supplying
          a jQuery selector that, when evaluated in the context of some input element
          (e.g. <code>$(selector, inputElement)</code>), matches an auxiliary element
          containing the hint text.
        </p>
        
        <p>Examples of both methods are given below:</p>
        
        <div class='caption'>Example using <code>title</code> attribute:</div>
        <pre>HTML:
&lt;input type='text' name='forename' hint='Forename' /&gt;
          
JS:
$('*[title]').inputHint();</pre>
        
        <form method='post' id='test-form-1'>
          <input type='text' title='Forename' name='forename' /><br/>
          <input type='text' title='Surname' name='surname' />
          <input type='submit' value='Submit' />
        </form>
 
        <div class='caption'>Example using auxiliary element:</div>
        <pre>HTML:
&lt;input type='text' name='forename' /&gt;
&lt;kbd&gt;Enter your forename here&lt;/kbd&gt;
          
JS:
$('input').inputHint({using: '+kbd'});</pre>
        <form method='post' id='test-form-2'>
          <input type='text' name='forename' /> <kbd>Enter your forename here</kbd><br/>
          <input type='text' name='surname' /> <kbd>Enter your surname here</kbd>
          <input type='submit' value='Submit' />
          <br/>
          (obviously you'd hide the <code>&lt;kbd/&gt;</code> elements in real usage)
        </form>
 
        <h2>Direct Link</h2>
        
        <p><a href='http://github.com/jaz303/jquery-grab-bag/tree/master/javascripts/jquery.input-hint.js'>jquery.input-hint.js</a></p>
        
      </div>
      
    </div>
  </body>
</html>