用jquery实现输入框获取焦点消失文字


Posted in Javascript onApril 27, 2013

我们在登录网站的时候,文本框中经常会有提示你输入的信息,当你点击文本框,提示信息自动消失,当文本框什么都没有,而且失去焦点的时候,又有了提示文字。

1.原型开发,先做一个简单的:
我们首先需要一个html文件:

<html> 
<head> 
<title>input test</title> 
<meta name="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
//这里放置css 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
//这里放置jquery代码 
</script> 
</head> 
<body> 
<form method="POST" id="user" action=""> 
User Name:<input type="text" name="username" value="Enter your name" /><br/> 
PassWord:<input type="password" name="password" value="Enter your password" /> 
<input type="submit" name="sub" value="login" /> 
</form> 
</div> 
</body> 
</html>

下面加入jquery代码:
我使用了click 和blur内置事件类型处理,而且,只是对username框有效(因为密码框还有别的因素考虑)
<html> 
<head> 
<title>input test</title> 
<meta name="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#username").click( 
function(){ 
if($(this).val()=="Enter your name"){ 
$(this).val(""); 
} 
}) 
$("#username").blur( 
function(){ 
if($(this).val()=="") 
{ 
$(this).val("Enter your name"); 
} 
}) 
}); 
</script> 
</head> 
<body> 
<div id="content"> 
<form method="POST" id="user" action=""> 
User Name:<input type="text" id="username" name="username" value="Enter your name" /><br/> 
PassWord:<input type="password" name="password" value="Enter your password" /> 
<input type="submit" name="sub" value="login" /> 
</form> 
</div> 
</body> 
</html>

2.做的更好
这样基本的原型就写成了,但是这个原型有许多的不足:
1.也许可以对密码框也使用这种方式,但是密码框的type类型是password,它不能显示,何来提示文字?
2. if($(this).val()=="")这种写法我可以接受,但是 if($(this).val()=="Enter your name"),你不觉得这很...要是我就想输这个呢...
3.提示文字用别的灰色的粗体表示,这样交互性是不是更强?
4.既然想要用两种字体表示,能不能把他们提取出来?写在.css里?这个是可以重用的啊!

解决办法:
1.密码框先让它的type是text的,等到点击了,我们再设置成password
2.用个变量来表示是否要切换吧。
3.设置不同的css.
4.用attr("class","class1"),attr("class","class2")来切换class,而不是引用id.(也就是说用.不用#)
下面是实现:

<html> 
<head> 
<title>input test</title> 
<style type="text/css"> 
.default { 
font-weight:bold; 
color:#787878; 
} 
.puton{ 
font-weight:normal; 
color:black; 
} 
</style> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var b=true; 
$("#username").click( 
function(){ 
if(b==true){ 
$(this).val(""); 
$(this).attr("class","puton"); 
b=false; 
} 
} 
) 
$("#username").blur( 
function(){ 
if( $(this).val()==""){ 
$(this).val("Enter your name"); 
$(this).attr("class","default"); 
b=true; 
} 
} 
) 
}); 
$(document).ready(function(){ 
var b=true; 
$("#password").click( 
function(){ 
if(b==true){ 
$(this).val(""); 
$(this).attr("type","password"); 
$(this).attr("class","puton"); 
b=false; 
} 
}) 
$("#password").blur( 
function(){ 
if( $(this).val()==""){ 
$(this).val("Enter your password"); 
$(this).attr("type","text"); 
$(this).attr("class","default"); 
b=true; 
} 
} 
) 
}); 
</script> 
</head> 
<body> 
<div id="content"> 
<form method="POST" id="user" action=""> 
User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/> 
PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password" /> 
<input type="submit" name="sub" value="login" /> 
</form> 
</div> 
</body> 
</html>

3.更多:
把css写到外部文件.
DRY原则!用插件来实现.
我在下一篇博客去实现.
author: aiqier
Javascript 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
Js切换功能的简单方法
Nov 23 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
js Calender控件使用详解
Jan 05 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
javascript中强制执行toString()具体实现
Apr 27 #Javascript
用客户端js实现带省略号的分页
Apr 27 #Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 #Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
You might like
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python基于select实现的socket服务器
2016/04/13 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Pyqt5实现英文学习词典
2019/06/24 Python
python加载自定义词典实例
2019/12/06 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
组织生活会发言材料
2014/12/15 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书