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 验证密码强弱的小例子
Mar 21 Javascript
js快速排序的实现代码
Dec 08 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
从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生成略缩图代码
2012/07/16 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
微信小程序签到功能
2018/10/31 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
行政主管岗位职责
2013/11/18 职场文书
应届生如何写自荐信
2014/01/05 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
会计助理岗位职责
2014/02/17 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
学习计划是什么
2019/04/30 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
如何利用Python实现一个论文降重工具
2021/07/09 Python
详解nginx location指令
2022/01/18 Servers
介绍一下28个JS常用数组方法
2022/05/06 Javascript
mysql数据库隔离级别详解
2022/06/16 MySQL