本文转自: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
用法:
?
<html xmlns= "http://www.w3.org/1999/xhtml" >
<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>
|
[转]jQuery为控件添加水印文字的相关教程结束。