zoukankan      html  css  js  c++  java
  • jQuery为控件添加水印文字

    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>
    
  • 相关阅读:
    BZOJ 3218: a + b Problem
    P4542 [ZJOI2011]营救皮卡丘
    P4843 清理雪道
    P4553 80人环游世界
    P4126 [AHOI2009]最小割
    P2619 [国家集训队2]Tree I
    P2469 [SDOI2010]星际竞速
    P2050 [NOI2012]美食节
    易语言入门
    jdbc连接oracle语法
  • 原文地址:https://www.cnblogs.com/gzh4455/p/2195418.html
Copyright © 2011-2022 走看看