文本框值是否为空，有就隐藏提示语，反之显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本框值是否为空，有就隐藏提示语，反之显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
#groups label{display:block;height:40px;position:relative;margin:20px 0;}
#groups 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;}
</style>
</head>
<body>
<div id="groups">
<label><span>用户名</span><input type="text" class="input_txt" /></label>
<label><span>密码</span><input type="password" class="input_txt" /></label>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#groups .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();
}
});
})
})
</script>
</body>
</html>
以上是关于文本框值是否为空，有就隐藏提示语，反之显示的主要内容，如果未能解决你的问题，请参考以下文章
在按钮单击文本框值是空的使用 asp.net mvc 显示警报？
发生带有 Jquery 对话框的邮箱时，asp.net 文本框值为空
axure7.0如何实现光标在文本框中获得焦点时，文本框内容自动清空。失去焦点时显示默认文字，谢谢！