[转]jQuery为控件添加水印文字

本文转自：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为控件添加水印文字

最新文章

热门文章