ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)


Posted in Javascript onJanuary 13, 2012

当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失。
当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示。
为了实现上面的需求,代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="Recipe1" %> 
<!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>Recipe1</title> 
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<style type="text/css"> 
.defaultText 
{ 
font-style: italic; 
color: #CCCCCC; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
var searchBox = $("#<%=txtSearch.ClientID %>"); // 通过ClientID获取服务器控件ID 
searchBox.focus(function () { 
if (searchBox.val() == this.title) { // TextBox控件ToolTip属性转换为Html为title属性 
searchBox.val(""); 
searchBox.removeClass("defaultText"); 
} 
}); 
searchBox.blur(function () { 
if (searchBox.val() == "") { 
searchBox.val(this.title); 
searchBox.addClass("defaultText"); 
} 
}); 
searchBox.blur(); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<p> 
</p> 
<div align="center"> 
<fieldset style="width: 400px; height: 80px;"> 
<p> 
<asp:TextBox ID="txtSearch" runat="server" Width="200px" CssClass="defaultText" ToolTip="请输入搜索的关键字"></asp:TextBox> 
<asp:Button ID="btnSearch" runat="server" Text="搜索" /></p> 
</fieldset> 
</div> 
</form> 
</body> 
</html>

显示效果:

 

ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)

Javascript 相关文章推荐
读jQuery之一(对象的组成)
Jun 11 Javascript
javascript date格式化示例
Sep 25 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 #Javascript
js中根据字数截取字符串,不能截断url
Jan 12 #Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 #Javascript
js日历功能对象
Jan 12 #Javascript
关于 文本框默认值 的操作js代码
Jan 12 #Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
JS读取cookies信息(记录用户名)
Jan 10 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP 全角转半角实现代码
2010/05/16 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python常用数据类型之间的转换总结
2019/09/06 Python
python集合能干吗
2020/07/19 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
《巨人的花园》教学反思
2014/02/12 职场文书
高中班级口号
2014/06/09 职场文书
房地产端午节活动方案
2014/08/24 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
应急管理工作总结2015
2015/05/04 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
小学三年级作文之写景
2019/11/05 职场文书