这篇文章介绍了jQuery表单获取和失去焦点输入框提示效果的实例代码
有需要的朋友可以参考一下
复制代码 代码如下:
$("#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:px;margin:px auto;border:solid px #EDEDE;background:#FCFEF;
padding:px;boxshadow: px px rgba() inset;}
label{display:block;height:px;position:relative;margin:px ;}
span{position:absolute;float:left;lineheight:px;left:px;color:#BCBCBC;cursor:text;}
input_txt{width:px;border:solid px #ccc;boxshadow: px px rgba() inset;
height:px;textindent:px;}
input_txt:focus{boxshadow: px rgba();border:solid px #B;}
border_radius{borderradius:px;color:#B;}
h{fontfamily:"微软雅黑";textshadow:px px px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus">
<h>聚焦型提示语消失 无效果请刷新</h>
<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">
<h>输入型提示语消失</h>
<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>
