本文转自:http://www.cnblogs.com/gzh4455/archive/2011/09/29/2195418.html
jQuery扩展:
jquery.tinywatermark-3.1.0.js文件代码:
(
function
($) {
$.fn.watermark =
function
(c, t) {
var
e =
function
(e) {
var
i = $(
this
);
if
(!i.val()) {
var
w = t || i.attr(
'title'
), $c = $($(
"<div />"
).append(i.clone()).html().replace(/type=\
"?password\"?/, 'type="
text"')).val(w).addClass(c);
i.replaceWith($c);
$c.focus(
function
() {
$c.replaceWith(i); setTimeout(
function
() {i.focus();}, 1);
})
.change(
function
(e) {
i.val($c.val()); $c.val(w); i.val() && $c.replaceWith(i);
})
.closest(
'form'
).submit(
function
() {
$c.replaceWith(i);
});
}
};
return
$(
this
).live(
'blur change'
, e).change();
};
})(jQuery);
|
或者访问网址:http://plugins.jquery.com/files/jquery.tinywatermark-3.1.0.js_.txt
用法:
<head runat=
"server"
>
<title>WaterMark</title>
<script src=
"../JS/jquery-1.5.2.min.js"
type=
"text/javascript"
></script>
<script src=
"../JS/jquery.tinywatermark-3.1.0.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
language=
"javascript"
>
$(
function
()
{
$(
"input[title='Month']"
).watermark(
'watermark'
,
'Title'
);
$(
"textarea[title='Content']"
).watermark(
'watermark'
,
'Please input the content !'
);;
});
</script>
<style type=
"text/css"
>
.watermark {color:
#999;}
</style>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<div>
<div><input title=
"Month"
/></div>
<div><textarea id=
"TextArea1"
cols=
"20"
rows=
"2"
title=
"Content"
></textarea></div>
</div>
</form>
</body>
</html>
|