两种方法实现文本框输入内容提示消失


Posted in Javascript onMarch 17, 2013

第一种方法
基于HTML5 input标签的新特性 - placeholder 。另外,x-webkit-speech 属性可以实现语音输入功能。

<div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-speech></div> 
<div><input type="password" name="password" placeholder="密 码" tabindex="2"></div>

第二种方法
用span模拟,定位span,借助JS键盘事件判断输入,确定span里的内容显示隐藏。
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#focus .input_txt").each(function(){ 
var thisVal=$(this).val(); 
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 
if(thisVal!=""){ 
$(this).siblings("span").hide(); 
}else{ 
$(this).siblings("span").show(); 
} 
//聚焦型输入框验证 
$(this).focus(function(){ 
$(this).siblings("span").hide(); 
}).blur(function(){ 
var val=$(this).val(); 
if(val!=""){ 
$(this).siblings("span").hide(); 
}else{ 
$(this).siblings("span").show(); 
} 
}); 
}) 
$("#keydown .input_txt").each(function(){ 
var thisVal=$(this).val(); 
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 
if(thisVal!=""){ 
$(this).siblings("span").hide(); 
}else{ 
$(this).siblings("span").show(); 
} 
$(this).keyup(function(){ 
var val=$(this).val(); 
$(this).siblings("span").hide(); 
}).blur(function(){ 
var val=$(this).val(); 
if(val!=""){ 
$(this).siblings("span").hide(); 
}else{ 
$(this).siblings("span").show(); 
} 
}) 
}) 
}) 
</script> 
<style type="text/css"> 
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} 
label{display:block;height:40px;position:relative;margin:20px 0;} 
span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} 
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} 
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;} 
.border_radius{border-radius:5px;color:#B00000;} 
h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;} 
</style> 
</head> 
<body> 
<form class="border_radius" id="focus"> 
<h2>聚焦型提示语消失</h2> 
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 
</form> 
<form class="border_radius" id="keydown"> 
<h2>输入型提示语消失</h2> 
<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
基于javascript编写简单日历
May 02 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
vue实现计步器功能
Nov 01 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
js 自制滚动条的小例子
Mar 16 #Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 #Javascript
js加强的经典分页实例
Mar 15 #Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 #Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 #Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
You might like
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
详解如何使用Python编写vim插件
2017/11/28 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python实现简单的学生管理系统
2021/02/22 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
德国购买健身器材:AsVIVA
2017/08/09 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
《散步》教学反思
2014/03/02 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
会计专业求职信
2014/08/10 职场文书
2015年财政所工作总结
2015/04/25 职场文书
2015年纪委工作总结
2015/05/13 职场文书
走近毛泽东观后感
2015/06/04 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
车辆挂靠协议书
2016/03/23 职场文书