文本框水印效果（经常用于关键字查询）

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" />