本文转自：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> |