javascript

位置:IT落伍者 >> javascript >> 浏览文章

jQuery表单获取和失去焦点输入框提示效果


发布日期:2018年04月15日
 
jQuery表单获取和失去焦点输入框提示效果

<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "<html xmlns="<head><meta httpequiv="ContentType" content="text/html; charset=utf" /><title>无标题文档</title><script src=" 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: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>

上一篇:jquery 层次选择器siblings与nextAll的区别介绍

下一篇:JS和jquery获取各种屏幕的宽度和高度