文本框提示语当输入时消失的写法-温州网络公司,温州网站制作,温州网站建设,温州网页设计,温州网站推广,温州网站优化,温州做网站

- 龙诚动态
  
  行业新闻
  
  我们的观点
  
  公司公告
  
  建站技术
  
  网站SEO优化
  
  网站制作流程
  
  产品报价
  - 联系电话：0577-55882408
  - 传真号码：0577-55882411
  - 联系手机：15224122065
  - 联系地址：温州市瓯海站南商贸城C幢306
- - 首页-新闻中心-建站技术
  可尝试刷新后查看特效 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></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:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} label{display:block;height:40px;position:relative;margin:20px 0;} 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;} .border_radius{border-radius:5px;color:#B00000;} h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;} </style> <form id="focus" class="border_radius"> <h2> 聚焦型提示语消失 </h2> <label><span>花瓣注册邮箱</span><input class="input_txt border_radius" /></label> <label><span>密码</span><input class="input_txt border_radius" /></label> </form> <form id="keydown" class="border_radius"> <h2> 输入型提示语消失 </h2> <label><span>花瓣注册邮箱</span><input class="input_txt border_radius" /></label> <label><span>密码</span><input class="input_txt border_radius" /></label> </form>