jQuery初体验（查询上的一点小控制）

最新推荐文章于 2019-08-21 19:46:41 发布

天殇月痕

最新推荐文章于 2019-08-21 19:46:41 发布

阅读量805

点赞数

文章标签： jquery textbox function server asp button

本文链接：https://blog.csdn.net/whw6263989/article/details/7904561

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
     .jQueryText
   {
       font-style:italic;
       color:#CCCCCC;
   }
    </style>
    <script type="text/javascript" src="JQuery/jquery-1.4.2-vsdoc.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            var searchBox = $('#<%=TextBox1.ClientID%>');
            searchBox.blur(function() {
                if (searchBox.val() == "") {
                    searchBox.val(this.title);
                }
            });
            searchBox.focus(
            function() {
                if (searchBox.val() == this.title) {

                    searchBox.val("");
                }
            });
        }); 
        
    </script>
</head>
<body>
<form runat="server">
 <div>
   <asp:TextBox ID="TextBox1" width="300px" CssClass="jQueryText" ToolTip="请在这里输入要查询的内容" runat="server"></asp:TextBox>
   <asp:Button ID="btnSubmit" Text="搜索" runat="server" />
</div>
</form>
</body>
</html>

案例：搜索框的默认提示文字

我们首先添加两个Asp.net控件，见下面的代码：

<div>
   <asp:TextBox ID="TextBox1" width="300px" CssClass="jQueryText" ToolTip="请在这里输入要查询的内容" runat="server"></asp:TextBox>
   <asp:Button ID="btnSubmit" Text="搜索" runat="server" />
</div>

Css文件代码如下：

<style type="text/css">
   .jQueryText
   {
       font-style:italic;
       color:#CCCCCC;
   }
 </style>

现在我们先看一下效果。

现在我们开始利用jQuery来控制这个TextBox，首先我们需要获取TextBox1的客户端ID，这样JS就可以通过ID获取TextBox控件了。见代码：

var searchBox = $('#<%=TextBox1.ClientID%>');

当TextBox获取焦点时要做的工作，见代码：

searchBox.focus(
            function() {
                if (searchBox.val() == this.title) {
                    searchBox.removeClass("defaultText");
                    searchBox.val("");
                }
});

这里需要注意的是：Title属性是TextBox的ToolTip属性在客户端的呈现。

当TextBox失去焦点时要做的工作，见代码：

searchBox.blur(
            function () {
                if (searchBox.val() == "") {
                    searchBox.addClass("defaultText");
                    searchBox.val(this.title);
});

this.title 等于ToolTip的值

TEXTBOX生成的HTML如下取的是 input 和 title 也就是当前控件的title属性
<input name="TextBox1" type="text" id="TextBox1" title="请在这里输入要查询的内容" class="jQueryText" style="width:300px;">

失去焦点时，如果我们没有输入要查询的内容，及TextBox1.text = ""时，重新加载CSS，并把TextBox1的Text属性设为“请在这里输入要查询的内容”

最后我们要做的工作便是在页面开始时执行一下blur()函数即可，见代码：

searchBox.blur();

效果如下：

这是开始与失去焦点时的截图

这是获取焦点时的截图

天殇月痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery初体验（查询上的一点小控制）

.jQueryText { font-style:italic; color:#CCCCCC; } $(function() { var searchBox = $('#'); searchBox.blur(function() {
复制链接

扫一扫