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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
javascript中indexOf技术详解
May 07 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 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
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
angular2使用简单介绍
2016/03/01 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python基础教程之对象和类的实际运用
2014/08/29 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python opencv之SURF算法示例
2018/02/24 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python 三元运算符使用解析
2019/09/16 Python
python中删除某个元素的方法解析
2019/11/05 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
化学教育专业求职信
2014/07/08 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
护理实习生带教计划
2015/01/16 职场文书
职称评定个人总结
2015/03/05 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python