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

更新时间：2013年03月17日 09:48:14 作者：

第一种方法:基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能;第二种方法：用span模拟，定位span，借助JS键盘事件判断输入，确定span里的内容显示隐藏

第一种方法：
基于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> 

您可能感兴趣的文章:

JS统计Flash被网友点击过的代码
JS统计Flash被网友点击过的代码...
2007-05-05
十个你必须要会的TypeScript技巧分享
学习Typescript通常是一个重新发现的过程。这篇文章为大家整理了十个你必须要会的TypeScript技巧，希望对大家学习TypeScript有所帮助
2023-06-06
JavaScript 数据结构之字典方法
这篇文章主要介绍了JavaScript 数据结构之字典方法，字典即Dictionary，是一种以键-值对形式存储数据的数据结构，下文更多相关介绍需要的小伙伴可以参考一下
2022-04-04
HTML中用JS实现旋转的圣诞树
这篇文章介绍了HTML中用JS实现旋转的圣诞树，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
微信小程序云开发实现云数据库读写权限
这篇文章主要为大家详细介绍了微信小程序云开发实现云数据库读写权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
js将字符串中的每一个单词的首字母变为大写其余均为小写
本文主要介绍了javascript将字符串中的每一个单词的首字母变为大写其余均为小写的方法。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
video.js使用改变ui过程
这篇文章主要介绍了video.js使用改变ui的过程，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
bcastr2.0 通用的图片浏览器
bcastr2.0 通用的图片浏览器...
2006-11-11
JavaScript中重名的函数与对象示例详析
最近同事问了一个问题，说在js中如果函数与对象重名了会怎么样？仔细详细这个问题值得讨论一下，所以便有了这篇文章，这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧啊。
2017-09-09
将函数的实际参数转换成数组的方法
实际参数在函数中我们可以使用 arguments 对象获得（注：形参可通过 arguments.callee 获得），虽然 arguments 对象与数组形似，但仍不是真正意义上的数组。
2010-01-01