【Jquery】插件—Watermark实现自定义文本框水印
2012-02-16 15:25
766 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0086)http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><HEAD>
<META content="text/html;charset=utf-8" http-equiv="Content-Type"><TITLE>jQuery
Watermark</TITLE>
<SCRIPT type="text/javascript" src="jQuery的水印_files/jsapi.js"></SCRIPT>
<SCRIPT type="text/javascript">google.load("jquery", "1.3.2");</SCRIPT>
<SCRIPT type="text/javascript" src="jQuery的水印_files/jquery.watermark-2.0.min.js"></SCRIPT>
<STYLE type="text/css" media="screen">
.watermark {
color: #999 !important;
}
.watermark2 {
color: #999 !important;
font-style: italic !important;
}
.watermark3 {
color: #c77 !important;
}
html {
color: #000;
background: #fff;
}
body {
margin: 10px;
font: 12px Verdana, Geneva, sans-serif;
}
h1 {
margin: 30px 0 10px;
font: bold 24px "Segoe UI", Arial, Helvetica, sans-serif;
}
h2 {
margin: 10px 0 20px;
font: bold 18px "Segoe UI", Arial, Helvetica, sans-serif;
}
h3 {
margin: 30px 0 10px;
font: bold 22px "Segoe UI", Arial, Helvetica, sans-serif;
}
form.cmxform fieldset {
margin-bottom: 10px;
}
form.cmxform legend {
padding: 0 5px;
font: bold 16px "Segoe UI", Arial, Helvetica, sans-serif;
}
form.cmxform label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form.cmxform fieldset ol {
margin: 10px 4px;
padding: 0;
}
form.cmxform fieldset li {
list-style: none;
padding: 3px;
margin: 0;
}
form.cmxform fieldset fieldset {
border: none;
margin: 3px 0 0;
}
form.cmxform fieldset fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}
form.cmxform fieldset fieldset label {
display: block;
width: auto;
}
form.cmxform em {
font-weight: bold;
font-style: normal;
color: #f00;
}
form.cmxform label {
width: 120px; /* Width of labels */
}
form.cmxform input[type=text],
form.cmxform input[type=password] {
width: 160px;
font: 14px "Segoe UI", Arial, Helvetica, sans-serif;
}
form.cmxform textarea {
width: 400px;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}
#toc li {
margin: 4px 0;
}
#toc a {
text-decoration: none;
border-bottom: 1px solid #66c;
color: #00c;
outline: none;
}
a.top {
position: absolute;
right: 10px;
text-decoration: none;
border: 1px solid #99f;
border-top-color: #ddf;
border-left-color: #ddf;
padding: 3px 6px;
color: #00c;
outline: none;
}
#foot {
margin: 100px 0 30px;
border-top: 1px solid #ccc;
padding-top: 4px;
font: 11px Verdana, Geneva, sans-serif;
}
#foot p {
margin: 4px 0;
}
#foot h1 {
margin: 20px 0 4px;
font: bold 13px "Segoe UI", Arial, Helvetica, sans-serif;
}
#foot ul,
#foot li {
margin: 4px 0;
}
#foot a {
text-decoration: none;
border-bottom: 1px solid #66c;
color: #00c;
outline: none;
}
</STYLE>
<META name="GENERATOR" content="MSHTML 9.00.8112.16441"></HEAD>
<BODY>
<H1>jQuery Watermark Plugin</H1>
<H2>v 2.0</H2>
<FIELDSET id="summary">
<P>This jQuery plugin will easily create watermark hints in input and textarea
elements.</P>
<P><STRONG>Features:</STRONG></P>
<UL>
<LI>Watermark style is controlled by CSS classes</LI>
<LI>Each input element can have its own independent watermark text and
class/style</LI>
<LI>Plugin automatically removes all watermarks prior to form submission</LI>
<LI>Both watermark text and CSS class name can be changed dynamically</LI>
<LI>Visual Studio Intellisense-compatible documentation included in
source</LI>
<LI>Comes with jQuery selector extension ":data(...)" (documented in
source)</LI>
<LI>Password input automatically switches back to obfuscated text when
focused</LI>
<LI>Minified version is very compact — under 3,000 bytes</LI></UL>
<P><STRONG>Demonstrations:</STRONG></P>
<UL id="toc">
<LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#1">Demo
1</A> – Simple watermark</LI>
<LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#2">Demo
2</A> – Several watermarks created with one statement + different class
name</LI>
<LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#3">Demo
3</A> – Watermark changed dynamically (countdown timer)</LI>
<LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#4">Demo
4</A> – Multi-line watermark in a TEXTAREA tag</LI>
<LI><A href="http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm?d4-address=#5">Demo
5</A> – Watermark in a password input element</LI></UL></FIELDSET>
<FORM id="demo1" class="cmxform" method="GET" action="">
<H3>Demonstration 1</H3>
<FIELDSET><LEGEND>Country uses simple watermark</LEGEND>
<OL>
<LI><LABEL for="d1-name">Name <EM>*</EM></LABEL> <INPUT id="d1-name"></LI>
<LI><LABEL for="d1-address1">Address <EM>*</EM></LABEL> <INPUT id="d1-address1"></LI>
<LI><LABEL for="d1-town-city">Town/City <EM>*</EM></LABEL> <INPUT id="d1-town-city"></LI>
<LI><LABEL for="d1-state">State/Province <EM>*</EM></LABEL> <INPUT id="d1-state"></LI>
<LI><LABEL for="d1-postcode">Zip/Postcode <EM>*</EM></LABEL> <INPUT id="d1-postcode"></LI>
<LI><LABEL for="d1-country">Country</LABEL> <INPUT id="d1-country" name="d1-country"></LI>
<LI><LABEL></LABEL> <INPUT value="Submit" type="submit"> <INPUT id="d1-countryFocus" value="Set Focus to Country" type="button"></LI>
<LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
button.</LI>
<LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
watermark value is never submitted.</LI></OL></FIELDSET></FORM>
<FORM id="demo2" class="cmxform" method="GET" action="">
<H3>Demonstration 2</H3>
<FIELDSET><LEGEND>Several watermarks created with one statement + different
class name</LEGEND>
<OL>
<LI><LABEL for="d2-name">Name</LABEL> <INPUT id="d2-name" class="required"
name="d2-name"></LI>
<LI><LABEL for="d2-address1">Address</LABEL> <INPUT id="d2-address1" class="required"
name="d2-address1"></LI>
<LI><LABEL for="d2-town-city">Town/City</LABEL> <INPUT id="d2-town-city"
class="required" name="d2-town-city"></LI>
<LI><LABEL for="d2-state">State/Province</LABEL> <INPUT id="d2-state" class="required"
name="d2-state"></LI>
<LI><LABEL for="d2-postcode">Zip/Postcode</LABEL> <INPUT id="d2-postcode"
class="required" name="d2-postcode" maxLength="5"> (maxlength=5, but watermark
is longer)</LI>
<LI><LABEL for="d2-country">Country</LABEL> <INPUT id="d2-country"></LI>
<LI><LABEL></LABEL> <INPUT id="d2-submit" value="Submit" type="button"></LI>
<LI><LABEL></LABEL> • This Submit button issues a call to the <STRONG>form
(DOM object) submit() function</STRONG> (programmatic submit).</LI>
<LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
watermark value is never submitted.</LI></OL></FIELDSET></FORM>
<FORM id="demo3" class="cmxform" method="GET" action="">
<H3>Demonstration 3</H3>
<FIELDSET><LEGEND>Shows how watermark can be changed dynamically</LEGEND>
<OL>
<LI><LABEL for="d3-name">Name <EM>*</EM></LABEL> <INPUT id="d3-name"></LI>
<LI><LABEL for="d3-address1">Address <EM>*</EM></LABEL> <INPUT id="d3-address1"></LI>
<LI><LABEL for="d3-town-city">Town/City <EM>*</EM></LABEL> <INPUT id="d3-town-city"></LI>
<LI><LABEL for="d3-state">State/Province <EM>*</EM></LABEL> <INPUT id="d3-state"></LI>
<LI><LABEL for="d3-postcode">Zip/Postcode <EM>*</EM></LABEL> <INPUT id="d3-postcode"></LI>
<LI><LABEL for="d3-country">Country</LABEL> <INPUT id="d3-country" name="d3-country">
<EM style="display: none;" id="d3-tip">Clear input to restart timer</EM></LI>
<LI><LABEL></LABEL> <INPUT id="d3-submit" value="Submit" type="button"></LI>
<LI><LABEL></LABEL> • This Submit button issues a call to the <STRONG>jQuery
submit() trigger</STRONG> (programmatic submit).</LI>
<LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
watermark value is never submitted.</LI></OL></FIELDSET></FORM>
<FORM id="demo4" class="cmxform" method="GET" action="">
<H3>Demonstration 4</H3>
<FIELDSET><LEGEND>Multi-line watermark in a TEXTAREA tag</LEGEND>
<OL>
<LI><LABEL for="d4-name">Name <EM>*</EM></LABEL> <INPUT id="d4-name"></LI>
<LI><LABEL for="d4-address">Address <EM>*</EM></LABEL> <TEXTAREA id="d4-address" cols="60" rows="4" name="d4-address"></TEXTAREA></LI>
<LI><LABEL for="d4-country">Country</LABEL> <INPUT id="d4-country"></LI>
<LI><LABEL></LABEL> <INPUT value="Submit" type="submit"></LI>
<LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
button.</LI>
<LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
watermark value is never submitted.</LI></OL></FIELDSET></FORM>
<FORM id="demo5" class="cmxform" method="GET" action="">
<H3>Demonstration 5</H3>
<FIELDSET><LEGEND>Watermark in a password input element</LEGEND>
<OL>
<LI><LABEL for="d5-username">Username <EM>*</EM></LABEL> <INPUT id="d5-username"
name="d5-username"></LI>
<LI><LABEL for="d5-password">Password <EM>*</EM></LABEL> <INPUT id="d5-password"
name="d5-password" maxLength="10" type="password"></LI>
<LI><LABEL></LABEL> <INPUT value="Submit" type="submit"></LI>
<LI><LABEL></LABEL> • <STRONG>Do not enter any real passwords
here!</STRONG> Use something like "test".</LI>
<LI><LABEL></LABEL> • It is not safe to set a watermarked password
programmatically, so it's best to avoid.</LI>
<LI><LABEL></LABEL> • This is a normal <STRONG>type="submit"</STRONG>
button.</LI>
<LI><LABEL></LABEL> • Check the QueryString after clicking to verify that a
watermark value is never submitted.</LI></OL></FIELDSET></FORM>
<DIV id="foot">
<P>Watermark plugin for jQuery</P>
<P>Copyright © 2009 Todd Northrop</P>
<P>Visit Speednet Group at <A
href="http://www.speednet.biz/">http://www.speednet.biz/</A></P>
<H1>Other recent projects:</H1>
<UL>
<LI><A href="http://tinyautosave.googlecode.com/">Auto-Save plugin for
TinyMCE</A></LI>
<LI><A href="http://www.lotterypost.com/gadget">Lottery Results Gagdet for
Windows Vista & Windows 7</A></LI></UL></DIV>
<SCRIPT type="text/javascript">
// ** DEMO 1 *************
$(function () {
$("#d1-country").watermark("Leave blank for USA");
$("#d1-countryFocus").click(
function () {
$("#d1-country")[0].focus();
}
);
});
// ** DEMO 2 *************
$(function () {
$("#demo2 .required").watermark("Required", "watermark2");
$("#d2-submit").click(
function () {
this.form.submit();
}
);
});
// ** DEMO 3 *************
var $d3 = $("#d3-country"), $d3tip = $("#d3-tip"), c = 11, timer;
function countdown() {
if (--c == 0) {
$d3.val("United States").watermark();
$d3tip.show();
}
else {
$d3.watermark("Auto-select in: " + c, (c>5)? "watermark" : "watermark3");
timer = window.setTimeout(countdown, 1000);
}
}
$(function () {
timer = window.setTimeout(countdown, 1000);
$d3.focus(
function () {
if (timer) {
window.clearTimeout(timer);
}
}
).blur(
function () {
if ($d3.val().length == 0) {
c = 11;
$d3tip.hide();
countdown();
}
}
);
$("#d3-submit").click(
function () {
$(this.form).submit();
}
);
});
// ** DEMO 4 *************
$(function () {
$("#d4-address").watermark("Full street address\nCity, state and zip\nUse as many lines as necessary.");
});
// ** DEMO 5 *************
$(function () {
$("#d5-username").watermark("Enter your username");
$("#d5-password").watermark("Enter your password");
});
// ** Table of Contents *************
$("#toc li a").each(function () {
var i = this.hash.slice(1), y = $("#demo" + i).offset().top;
$(this).click(function () {
window.scrollTo(0, y - 20);
return false;
});
$('<a href="#" class="top">⇑ Top of page</a>').appendTo("body").css("top", y + 20).click(function () {
window.scrollTo(0, 0);
return false;
});
});
</SCRIPT>
</BODY></HTML>预览：http://www.rainweb.cn/JavaScript/jquery.watermark-2.0/jquery.watermark.htm
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单实现的JQuery文本框水印插件
- JQuery文本框水印插件的简单实现
- 自定义insertContent方法的JQuery插件实现在文本框光标位置插入内容并选中
- jQuery插件Validate实现自定义表单验证
- 基于JQuery的Swiper插件实现移动手机端幻灯片切换(可在每一张幻灯片div中插入自定义的元素，代码简介，扩展性好。)
- jQuery自定义插件开发基础1——jQuery实用函数的实现 .
- jquery自定义插件开发之window的实现过程
- jquery自定义插件——window的实现
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- jquery自定义插件——window的实现
- Jquery实现仿搜索引擎文本框自动补全插件
- 基于jQuery实现Accordion手风琴自定义插件
- 自定义jQuery插件实现分页
- jquery自定义插件实现分页效果
- jquery插件编写：文本框实现下拉框效果
- jquery自定义插件——window实现
- jQuery实现的一个自定义Placeholder属性插件
- php图片处理：加水印、缩略图的实现（自定义函数：watermark、thumbnail）
- jquery自定义插件实现分页效果
- jQuery自定义插件开发基础1——jQuery实用函数的实现