[转]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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值