文本框水印效果(经常用于关键字查询)
1、CSS部分
<style type="text/css">
.gray
{
color:Gray;
}
</style>
2、JAVASCRIPT部分(需要引入JQUERY类库)
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#sy")
.addClass("gray")//添加灰色字体样式
.val("请输入查询关键字")//添加文字
.bind({//绑定以下两个事件
//①单击事件(如果文本框中的文字为 请输入查询关键字,则给文本框置为空,且移除灰色字体样式)
"focus": function () {
if ($(this).val() == "请输入查询关键字") {
$(this).val("").removeClass("gray");
}
},
//②失去焦点事件(如果文本框没有输入内容,则为其添加 请输入关键字 的提示信息,且添加灰色字体样式)
"blur": function () {
if ($(this).val() == "") {
$(this).val("请输入查询关键字").addClass("gray");
}
}
});
});
</script>
3、HTML部分
<input type="text" id="sy" />