用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 相关文章推荐
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
JavaScript编写开发动态时钟
Jul 29 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
实用函数9
2007/11/08 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
webpack打包js的方法
2018/03/12 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python实现图片筛选程序
2018/10/24 Python
python读写配置文件操作示例
2019/07/03 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
建筑专业自荐信范文
2014/01/05 职场文书
高中军训感言400字
2014/02/24 职场文书
企业口号大全
2014/06/12 职场文书
司机岗位职责说明书
2014/07/29 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
检讨书1000字
2014/10/11 职场文书
投资合作意向书范本
2015/05/08 职场文书
污染环境建议书
2015/09/14 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL