文本框中创建默认文本提示
通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索。
当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失。
当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示。
为了实现上面的需求,代码如下:
复制代码 代码如下:
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.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>
script src="jquery-1.8.2.min.js" type="text/javascript">/script>
link href="Base.css" rel="stylesheet" type="text/css" />
style type="text/css">
.text
{
border: #0a8fda solid 1px;
color: #cccccc;
font-style:italic;
background: #fff url(img/input.gif);
padding: 5px;
}
.text-focus
{
border: solid 1px #f50;
background: #fff url(img/input.gif);
padding: 5px;
}
/style>
script type="text/javascript">
$(document).ready(function () {
var txtSearch = $("#%=txtSearch.ClientID%>");
$("#txtSearch").focus(function () {
if (txtSearch.val() == this.title) {
txtSearch.val("");
this.className = "text-focus";
}
});
$("#txtSearch").blur(function () {
if (txtSearch.val() == "") {
txtSearch.val(this.title);
this.className = "text";
}
});
txtSearch.blur();
});
/script>
/head>
body>
form id="form1" runat="server">
div style="margin: 100px auto; width: 400px; height: 80px;border: solid 1px #0a8fda;">
p style="text-align:center;">
asp:TextBox ID="txtSearch" runat="server" Width="200px" class="text" ToolTip="请输入搜索的关键字">/asp:TextBox>
asp:Button ID="btnSearch" runat="server" Text="搜索" class="button blue" />
/p>
/div>
/form>
/body>
/html>
您可能感兴趣的文章:- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- Jquery实现搜索框提示功能示例代码
- jquery+php实现搜索框自动提示
- jquery 模拟类搜索框自动完成搜索提示功能(改进)
- jQuery 插件仿百度搜索框智能提示(带Value值)
- 利用JQuery为搜索栏增加tag提示
- Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- jquery实现非叠加式的搜索框提示效果
- 基于jQueryUI和Corethink实现百度的搜索提示功能
- jQuery实现模拟搜索引擎的智能提示功能简单示例