1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
2 <!-- saved from url=(0086)http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm -->
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><HEAD>
4 <META content="text/html;charset=utf-8" http-equiv="Content-Type"><TITLE>jQuery
5 Watermark</TITLE>
6 <SCRIPT type="text/javascript" src="jQuery的水印_files/jsapi.js"></SCRIPT>
7
8 <SCRIPT type="text/javascript">google.load("jquery", "1.3.2");</SCRIPT>
9
10 <SCRIPT type="text/javascript" src="jQuery的水印_files/jquery.watermark-2.0.min.js"></SCRIPT>
11
12 <STYLE type="text/css" media="screen">
13 .watermark {
14 color: #999 !important;
15 }
16 .watermark2 {
17 color: #999 !important;
18 font-style: italic !important;
19 }
20 .watermark3 {
21 color: #c77 !important;
22 }
23
24 html {
25 color: #000;
26 background: #fff;
27 }
28 body {
29 margin: 10px;
30 font: 12px Verdana, Geneva, sans-serif;
31 }
32 h1 {
33 margin: 30px 0 10px;
34 font: bold 24px "Segoe UI", Arial, Helvetica, sans-serif;
35 }
36 h2 {
37 margin: 10px 0 20px;
38 font: bold 18px "Segoe UI", Arial, Helvetica, sans-serif;
39 }
40 h3 {
41 margin: 30px 0 10px;
42 font: bold 22px "Segoe UI", Arial, Helvetica, sans-serif;
43 }
44 form.cmxform fieldset {
45 margin-bottom: 10px;
46 }
47 form.cmxform legend {
48 padding: 0 5px;
49 font: bold 16px "Segoe UI", Arial, Helvetica, sans-serif;
50 }
51 form.cmxform label {
52 display: inline-block;
53 line-height: 1.8;
54 vertical-align: top;
55 }
56 form.cmxform fieldset ol {
57 margin: 10px 4px;
58 padding: 0;
59 }
60 form.cmxform fieldset li {
61 list-style: none;
62 padding: 3px;
63 margin: 0;
64 }
65 form.cmxform fieldset fieldset {
66 border: none;
67 margin: 3px 0 0;
68 }
69 form.cmxform fieldset fieldset legend {
70 padding: 0 0 5px;
71 font-weight: normal;
72 }
73 form.cmxform fieldset fieldset label {
74 display: block;
75 auto;
76 }
77 form.cmxform em {
78 font-weight: bold;
79 font-style: normal;
80 color: #f00;
81 }
82 form.cmxform label {
83 120px; /* Width of labels */
84 }
85 form.cmxform input[type=text],
86 form.cmxform input[type=password] {
87 160px;
88 font: 14px "Segoe UI", Arial, Helvetica, sans-serif;
89 }
90 form.cmxform textarea {
91 400px;
92 font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
93 }
94 #toc li {
95 margin: 4px 0;
96 }
97 #toc a {
98 text-decoration: none;
99 border-bottom: 1px solid #66c;
100 color: #00c;
101 outline: none;
102 }
103 a.top {
104 position: absolute;
105 right: 10px;
106 text-decoration: none;
107 border: 1px solid #99f;
108 border-top-color: #ddf;
109 border-left-color: #ddf;
110 padding: 3px 6px;
111 color: #00c;
112 outline: none;
113 }
114 #foot {
115 margin: 100px 0 30px;
116 border-top: 1px solid #ccc;
117 padding-top: 4px;
118 font: 11px Verdana, Geneva, sans-serif;
119 }
120 #foot p {
121 margin: 4px 0;
122 }
123 #foot h1 {
124 margin: 20px 0 4px;
125 font: bold 13px "Segoe UI", Arial, Helvetica, sans-serif;
126 }
127 #foot ul,
128 #foot li {
129 margin: 4px 0;
130 }
131 #foot a {
132 text-decoration: none;
133 border-bottom: 1px solid #66c;
134 color: #00c;
135 outline: none;
136 }
137 </STYLE>
138
139 <META name="GENERATOR" content="MSHTML 9.00.8112.16441"></HEAD>
140 <BODY>
141 <H1>jQuery Watermark Plugin</H1>
142 <H2>v 2.0</H2>
143 <FIELDSET id="summary">
144 <P>This jQuery plugin will easily create watermark hints in input and textarea
145 elements.</P>
146 <P><STRONG>Features:</STRONG></P>
147 <UL>
148 <LI>Watermark style is controlled by CSS classes</LI>
149 <LI>Each input element can have its own independent watermark text and
150 class/style</LI>
151 <LI>Plugin automatically removes all watermarks prior to form submission</LI>
152 <LI>Both watermark text and CSS class name can be changed dynamically</LI>
153 <LI>Visual Studio Intellisense-compatible documentation included in
154 source</LI>
155 <LI>Comes with jQuery selector extension ":data(...)" (documented in
156 source)</LI>
157 <LI>Password input automatically switches back to obfuscated text when
158 focused</LI>
159 <LI>Minified version is very compact — under 3,000 bytes</LI></UL>
160 <P><STRONG>Demonstrations:</STRONG></P>
161 <UL id="toc">
162 <LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#1">Demo
163 1</A> – Simple watermark</LI>
164 <LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#2">Demo
165 2</A> – Several watermarks created with one statement + different class
166 name</LI>
167 <LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#3">Demo
168 3</A> – Watermark changed dynamically (countdown timer)</LI>
169 <LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#4">Demo
170 4</A> – Multi-line watermark in a TEXTAREA tag</LI>
171 <LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#5">Demo
172 5</A> – Watermark in a password input element</LI></UL></FIELDSET>
173 <FORM id="demo1" class="cmxform" method="GET" action="">
174 <H3>Demonstration 1</H3>
175 <FIELDSET><LEGEND>Country uses simple watermark</LEGEND>
176 <OL>
177 <LI><LABEL for="d1-name">Name <EM>*</EM></LABEL> <INPUT id="d1-name"></LI>
178 <LI><LABEL for="d1-address1">Address <EM>*</EM></LABEL> <INPUT id="d1-address1"></LI>
179 <LI><LABEL for="d1-town-city">Town/City <EM>*</EM></LABEL> <INPUT id="d1-town-city"></LI>
180 <LI><LABEL for="d1-state">State/Province <EM>*</EM></LABEL> <INPUT id="d1-state"></LI>
181 <LI><LABEL for="d1-postcode">Zip/Postcode <EM>*</EM></LABEL> <INPUT id="d1-postcode"></LI>
182 <LI><LABEL for="d1-country">Country</LABEL> <INPUT id="d1-country" name="d1-country"></LI>
183 <LI><LABEL></LABEL> <INPUT value="Submit" type="submit"> <INPUT id="d1-countryFocus" value="Set Focus to Country" type="button"></LI>
184 <LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
185 button.</LI>
186 <LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
187 watermark value is never submitted.</LI></OL></FIELDSET></FORM>
188 <FORM id="demo2" class="cmxform" method="GET" action="">
189 <H3>Demonstration 2</H3>
190 <FIELDSET><LEGEND>Several watermarks created with one statement + different
191 class name</LEGEND>
192 <OL>
193 <LI><LABEL for="d2-name">Name</LABEL> <INPUT id="d2-name" class="required"
194 name="d2-name"></LI>
195 <LI><LABEL for="d2-address1">Address</LABEL> <INPUT id="d2-address1" class="required"
196 name="d2-address1"></LI>
197 <LI><LABEL for="d2-town-city">Town/City</LABEL> <INPUT id="d2-town-city"
198 class="required" name="d2-town-city"></LI>
199 <LI><LABEL for="d2-state">State/Province</LABEL> <INPUT id="d2-state" class="required"
200 name="d2-state"></LI>
201 <LI><LABEL for="d2-postcode">Zip/Postcode</LABEL> <INPUT id="d2-postcode"
202 class="required" name="d2-postcode" maxLength="5"> (maxlength=5, but watermark
203 is longer)</LI>
204 <LI><LABEL for="d2-country">Country</LABEL> <INPUT id="d2-country"></LI>
205 <LI><LABEL></LABEL> <INPUT id="d2-submit" value="Submit" type="button"></LI>
206 <LI><LABEL></LABEL> • This Submit button issues a call to the <STRONG>form
207 (DOM object) submit() function</STRONG> (programmatic submit).</LI>
208 <LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
209 watermark value is never submitted.</LI></OL></FIELDSET></FORM>
210 <FORM id="demo3" class="cmxform" method="GET" action="">
211 <H3>Demonstration 3</H3>
212 <FIELDSET><LEGEND>Shows how watermark can be changed dynamically</LEGEND>
213 <OL>
214 <LI><LABEL for="d3-name">Name <EM>*</EM></LABEL> <INPUT id="d3-name"></LI>
215 <LI><LABEL for="d3-address1">Address <EM>*</EM></LABEL> <INPUT id="d3-address1"></LI>
216 <LI><LABEL for="d3-town-city">Town/City <EM>*</EM></LABEL> <INPUT id="d3-town-city"></LI>
217 <LI><LABEL for="d3-state">State/Province <EM>*</EM></LABEL> <INPUT id="d3-state"></LI>
218 <LI><LABEL for="d3-postcode">Zip/Postcode <EM>*</EM></LABEL> <INPUT id="d3-postcode"></LI>
219 <LI><LABEL for="d3-country">Country</LABEL> <INPUT id="d3-country" name="d3-country">
220 <EM style="display: none;" id="d3-tip">Clear input to restart timer</EM></LI>
221 <LI><LABEL></LABEL> <INPUT id="d3-submit" value="Submit" type="button"></LI>
222 <LI><LABEL></LABEL> • This Submit button issues a call to the <STRONG>jQuery
223 submit() trigger</STRONG> (programmatic submit).</LI>
224 <LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
225 watermark value is never submitted.</LI></OL></FIELDSET></FORM>
226 <FORM id="demo4" class="cmxform" method="GET" action="">
227 <H3>Demonstration 4</H3>
228 <FIELDSET><LEGEND>Multi-line watermark in a TEXTAREA tag</LEGEND>
229 <OL>
230 <LI><LABEL for="d4-name">Name <EM>*</EM></LABEL> <INPUT id="d4-name"></LI>
231 <LI><LABEL for="d4-address">Address <EM>*</EM></LABEL> <TEXTAREA id="d4-address" cols="60" rows="4" name="d4-address"></TEXTAREA></LI>
232 <LI><LABEL for="d4-country">Country</LABEL> <INPUT id="d4-country"></LI>
233 <LI><LABEL></LABEL> <INPUT value="Submit" type="submit"></LI>
234 <LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
235 button.</LI>
236 <LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
237 watermark value is never submitted.</LI></OL></FIELDSET></FORM>
238 <FORM id="demo5" class="cmxform" method="GET" action="">
239 <H3>Demonstration 5</H3>
240 <FIELDSET><LEGEND>Watermark in a password input element</LEGEND>
241 <OL>
242 <LI><LABEL for="d5-username">Username <EM>*</EM></LABEL> <INPUT id="d5-username"
243 name="d5-username"></LI>
244 <LI><LABEL for="d5-password">Password <EM>*</EM></LABEL> <INPUT id="d5-password"
245 name="d5-password" maxLength="10" type="password"></LI>
246 <LI><LABEL></LABEL> <INPUT value="Submit" type="submit"></LI>
247 <LI><LABEL></LABEL> • <STRONG>Do not enter any real passwords
248 here!</STRONG> Use something like "test".</LI>
249 <LI><LABEL></LABEL> • It is not safe to set a watermarked password
250 programmatically, so it's best to avoid.</LI>
251 <LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
252 button.</LI>
253 <LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
254 watermark value is never submitted.</LI></OL></FIELDSET></FORM>
255 <DIV id="foot">
256 <P>Watermark plugin for jQuery</P>
257 <P>Copyright © 2009 Todd Northrop</P>
258 <P>Visit Speednet Group at <A
259 href="http://www.speednet.biz/">http://www.speednet.biz/</A></P>
260 <H1>Other recent projects:</H1>
261 <UL>
262 <LI><A href="http://tinyautosave.googlecode.com/">Auto-Save plugin for
263 TinyMCE</A></LI>
264 <LI><A href="http://www.lotterypost.com/gadget">Lottery Results Gagdet for
265 Windows Vista & Windows 7</A></LI></UL></DIV>
266 <SCRIPT type="text/javascript">
267 // ** DEMO 1 *************
268 $(function () {
269 $("#d1-country").watermark("Leave blank for USA");
270 $("#d1-countryFocus").click(
271 function () {
272 $("#d1-country")[0].focus();
273 }
274 );
275 });
276
277 // ** DEMO 2 *************
278 $(function () {
279 $("#demo2 .required").watermark("Required", "watermark2");
280 $("#d2-submit").click(
281 function () {
282 this.form.submit();
283 }
284 );
285 });
286
287 // ** DEMO 3 *************
288 var $d3 = $("#d3-country"), $d3tip = $("#d3-tip"), c = 11, timer;
289
290 function countdown() {
291 if (--c == 0) {
292 $d3.val("United States").watermark();
293 $d3tip.show();
294 }
295 else {
296 $d3.watermark("Auto-select in: " + c, (c>5)? "watermark" : "watermark3");
297 timer = window.setTimeout(countdown, 1000);
298 }
299 }
300
301 $(function () {
302 timer = window.setTimeout(countdown, 1000);
303 $d3.focus(
304 function () {
305 if (timer) {
306 window.clearTimeout(timer);
307 }
308 }
309 ).blur(
310 function () {
311 if ($d3.val().length == 0) {
312 c = 11;
313 $d3tip.hide();
314 countdown();
315 }
316 }
317 );
318 $("#d3-submit").click(
319 function () {
320 $(this.form).submit();
321 }
322 );
323 });
324
325 // ** DEMO 4 *************
326 $(function () {
327 $("#d4-address").watermark("Full street address\nCity, state and zip\nUse as many lines as necessary.");
328 });
329
330 // ** DEMO 5 *************
331 $(function () {
332 $("#d5-username").watermark("Enter your username");
333 $("#d5-password").watermark("Enter your password");
334 });
335
336 // ** Table of Contents *************
337 $("#toc li a").each(function () {
338 var i = this.hash.slice(1), y = $("#demo" + i).offset().top;
339
340 $(this).click(function () {
341 window.scrollTo(0, y - 20);
342 return false;
343 });
344
345 $('<a href="#" class="top">⇑ Top of page</a>').appendTo("body").css("top", y + 20).click(function () {
346 window.scrollTo(0, 0);
347 return false;
348 });
349 });
350 </SCRIPT>
351 </BODY></HTML>
预览：http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm