MVC Web页面的水印实现

 为了提高用户体验，在Web页面可输入的文本框中显示相应的文字提示（水印），经网上搜索用jquery可以实现：

具体实现可以参考博客园内的文章：文本框水印效果（经常用于关键字的搜索），下面是具体的代码（文本框水印效果的代码，补充了我的一些理解）：

<style type="text/css">
    .gray
    {
        color:Gray;
    }
    </style>

说明：所显示文字的样式，可根据需要自行定义。

<script src="/Content/script/jQuery.min.js" type="text/javascript"></script>//这边的src的值是所引入JQUERY类库的路径
    <script type="text/javascript">
        $(function () {
            $("#sy")//绑定输入文本框的Id
            .addClass("gray")//添加灰色字体样式,在上面应经定义
            .val("请输入查询关键字")//添加文字—需要显示的提示文本
            .bind({//绑定以下两个事件
                //①单击事件（如果文本框中的文字为 请输入查询关键字，则给文本框置为空，且移除灰色字体样式）
                "focus": function () {
                    if ($(this).val() == "请输入查询关键字") {
                        $(this).val("").removeClass("gray");
                    }
                },
                //②失去焦点事件（如果文本框没有输入内容，则为其添加 请输入关键字 的提示信息，且添加灰色字体样式）
                "blur": function () {
                    if ($(this).val() == "") {
                        $(this).val("请输入查询关键字").addClass("gray");
                    }
                }
            });
        });
    </script>


说明：JQUERY类库需要自行下载并引入（我这边是：下载JQUERY类库后复制黏贴到"/Content/script/目录下）

<input type="text" id="sy" />

上面的参考文章文本框水印效果（经常用于关键字的搜索），可以很好地解决属性类型为text的水印问题（即<input type="text" name="userName" id="sy" />），但上述方法不能用于属性类型为password的水印问题（即<input type="password" name="password" id="pwd" />）,本想通过修改type的属性类型来达到预期的水印效果，即通过jquery语句： $(this).attr('type', 'text');改变原来的type="password"属性类型，经验证和搜索得到如下结论：type属性为只读属性 ，无法进行修改。为了解决属性类型为password的水印问题继续查找，结果发现另一个非常简单的方法：html5支持在input上加入placeholder属性,他的功能就是水印的功能,而且提交的时候不会提交。参考W3School说明。

水印的其他参考：

ASP.NET C# MVC +Jquery 实现图片上传、剪辑、缩略、水印