用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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
js Calender控件使用详解
Jan 05 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
详解vue+css3做交互特效的方法
2017/11/20 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
javascript canvas检测小球碰撞
2020/04/17 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现简单的四则运算计算器
2016/11/02 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
暑期培训随笔感言
2014/03/10 职场文书
2015年小学总务工作总结
2015/07/21 职场文书