$(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>
给文本框加上placeholder属性就可以了,这样文本框获得焦点文字不会消失,只有当文本框的值改变之后才会消失。下面是参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5基本结构</title>
</head>
<body>
<input type="text" placeholder="请输入文本">
</body>
</html>
效果: