用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的获得各种控件Value的方法
Nov 19 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php基本函数汇总
2015/07/09 PHP
php简单复制文件的方法
2016/05/09 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
linux面试题参考答案(6)
2016/06/23 面试题
口头翻译求职人自荐信
2013/12/07 职场文书
领导的自我鉴定
2013/12/28 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
浅谈pytorch中的dropout的概率p
2021/05/27 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python