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

189 阅读 0 评论 125 点赞

我是靠谱客的博主包容大象，最近开发中收集的这篇文章主要介绍两种方法实现文本框输入内容提示消失，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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