MVC Web页面的水印实现
为了提高用户体验,在Web页面可输入的文本框中显示相应的文字提示(水印),经网上搜索用jquery可以实现:
具体实现可以参考博客园内的文章:文本框水印效果(经常用于关键字的搜索),下面是具体的代码(文本框水印效果的代码,补充了我的一些理解):
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <style type="text/css"> 2 .gray 3 { 4 color:Gray; 5 } 6 </style> 7 8 说明:所显示文字的样式,可根据需要自行定义。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <script src="/Content/script/jQuery.min.js" type="text/javascript"></script>//这边的src的值是所引入JQUERY类库的路径 2 <script type="text/javascript"> 3 $(function () { 4 $("#sy")//绑定输入文本框的Id 5 .addClass("gray")//添加灰色字体样式,在上面应经定义 6 .val("请输入查询关键字")//添加文字—需要显示的提示文本 7 .bind({//绑定以下两个事件 8 //①单击事件(如果文本框中的文字为 请输入查询关键字,则给文本框置为空,且移除灰色字体样式) 9 "focus": function () { 10 if ($(this).val() == "请输入查询关键字") { 11 $(this).val("").removeClass("gray"); 12 } 13 }, 14 //②失去焦点事件(如果文本框没有输入内容,则为其添加 请输入关键字 的提示信息,且添加灰色字体样式) 15 "blur": function () { 16 if ($(this).val() == "") { 17 $(this).val("请输入查询关键字").addClass("gray"); 18 } 19 } 20 }); 21 }); 22 </script> 23 24 25 说明:JQUERY类库需要自行下载并引入(我这边是:下载JQUERY类库后复制黏贴到"/Content/script/目录下)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <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说明。
水印的其他参考: