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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
php auth_http类库进行身份效验
2009/03/19 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP curl使用实例
2015/07/02 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
scrapy爬虫完整实例
2018/01/25 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python连接字符串过程详解
2020/01/06 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
SQL面试题
2013/04/30 面试题
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
酒店端午节促销方案
2014/02/18 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL