效果如下:
CSS代码
.watermark{ color:#999}
JS代码
(function($) {
$.fn.watermark = function(c,t) {
// c 水印样式
// t 水印提示信息
$(this).focus(function(){
var tf=$(this).hasClass(c);
if(tf==true){
$(this).removeClass(c).val(""); //清空水印提示
}
});
$(this).blur(function(){
t=$.trim(t); //去除前后空格
var text=$.trim($(this).val());
if(text.length==0){
$(this).addClass(c).val(t);
}
});
}
})(jQuery);
页面引用
<input type="text" id="username" class="watermark" value="请输入姓名"/>
$(function(){
$("#username").watermark("watermark","请输入姓名");
});