//聚焦型验证 $("#focus .inputText").each(function() { $(this).focus(function() { $(this).siblings("span").hide(); }).blur(function() { if ($(this).val() == "") { $(this).siblings("span").show(); } else { $(this).siblings("span").hide(); } }) }) //输入型验证 $("#keydown .inputText").each(function() { $(this).keydown(function() { $(this).siblings("span").hide(); }).blur(function() { if ($(this).val() == "") { $(this).siblings("span").show(); } else { $(this).siblings("span").hide(); } }) })
CSS代码
body { background: #333; padding: 0; margin: 0; } #focus, #keydown { width: 400px; padding: 20px; background: #FCF9EF; margin: 30px 0 0 30px; } #focus h2, #keydown h2 { font-size: 24px; font-family: "微软雅黑"; color: #b00000; } #focus label, #keydown label { display: block; position: relative; height: 40px; margin-top: 20px; } #focus span, #keydown span { display: block; position: absolute; top: 0; left: 10px; height: 40px; line-height: 40px; font-size: 14px; color: #999; cursor: text; } .radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .inputText { width: 378px; height: 14px; padding: 12px 10px; border: 1px #ccc solid; font-size: 14px; color: #333; -moz-box-shadow: inset 1px 1px 5px #ddd; -webkit-box-shadow: inset 1px 1px 5px #ddd; box-shadow: inset 1px 1px 5px #ddd; } .inputText:focus { outline: none; border: 1px #B00000 solid; -moz-box-shadow: 0 0 4px rgba(255,153,164,0.8); -webkit-box-shadow: 0 0 4px rgba(255,153,164,0.8); box-shadow: 0 0 4px rgba(255,153,164,0.8); }
HTML代码
<form class="radius" id="focus"> <h2>聚焦型提示语消失</h2> <label> <span>请输入帐号</span> <input type="text" class="inputText radius" /> </label> <label> <span>请输入密码</span> <input type="password" class="inputText radius" /> </label> </form> <form class="radius" id="keydown"> <h2>输入型提示语消失</h2> <label> <span>请输入帐号</span> <input type="text" class="inputText radius" /> </label> <label> <span>请输入密码</span> <input type="password" class="inputText radius" /> </label> </form>
jQuery(document).ready(function($) {
//聚焦型验证 $("#focus .inputText").each(function() { $(this).focus(function() { $(this).siblings("span").hide(); }).blur(function() { if ($(this).val() == "") { $(this).siblings("span").show(); } else { $(this).siblings("span").hide(); } }) })
//输入型验证 $("#keydown .inputText").each(function() { $(this).keydown(function() { $(this).siblings("span").hide(); }).blur(function() { if ($(this).val() == "") { $(this).siblings("span").show(); } else { $(this).siblings("span").hide(); } }) })
});
About the author