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


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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
Vue3.0的优化总结
Oct 16 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
交通事故检查书范文
2014/01/30 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
世界名著读书笔记
2015/06/25 职场文书
社区干部培训心得体会
2016/01/06 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js