1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 输入框获得和失去焦点时隐藏/显示文字 新颖实现

输入框获得和失去焦点时隐藏/显示文字 新颖实现

时间:2018-09-06 10:23:53

相关推荐

输入框获得和失去焦点时隐藏/显示文字 新颖实现

Java代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=7"/><title>注册中心</title><scripttype="text/javascript"src="/statics/js/jquery.min.js"></script><style>@charset"utf-8";/*CSSDocument*/html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,i,dl,dt,dd,ul,li,form,table,tr,th,td,footer,header,input,button{margin:0;padding:0;border:0;outline:0;}body{font:12px/1.5tahoma,arial,'宋体',sans-serif;margin:0auto;padding:00;color:#333;position:relative;zoom:1;}/*CSSDocument*/body{background:url(../images/body_bg.jpg)no-repeatcentertop#f9feff;}.clearafter:after{height:0px;content:".";clear:both;display:block;visibility:hidden;}tabletrtd{padding-bottom:15px;}.login_title{width:105px;text-align:right;font-size:14px;font-weight:bold;color:#555;}.login_titleem{font-size:12px;font-family:"宋体";font-weight:normal;color:#F00;margin-right:3px;overflow:hidden;}.login_title{width:188px;}.text_info{display:inline;float:left;width:262px;height:28px;border-top:1pxsolid#bfbfbf;border-left:1pxsolid#bfbfbf;border-right:1pxsolid#d6d6d6;border-bottom:1pxsolid#d6d6d6;margin-right:15px;position:relative;overflow:hidden;}.text_hint{width:250px;height:26px;line-height:26px;border-top:2pxsolid#ebebeb;border-left:2pxsolid#ebebeb;color:#999;padding:0px5px;position:absolute;top:0px;left:0px;overflow:hidden;cursor:text;}.text_infoinput{width:252px;height:28px;padding:0px5px;color:#555;background:#fff;overflow:hidden;}/*input:focus{border-color:#74A5E1;box-shadow:005px#74A5E1;}*/.text_info1{width:162px;}.text_info1input{width:152px;}</style></head><body><tablewidth="667"border="0"cellspacing="0"cellpadding="0"><trclass="row"><tdclass="login_title"><em>*</em>邮箱:</td><td><divclass="text_info"><labelclass="text_hint"for="email">请输入您常用的邮箱地址</label><inputtype="text"id="email"name="email"/></div></td></tr><trclass="row"><tdclass="login_title"><em>*</em>密码:</td><td><divclass="text_info"><labelclass="text_hint"for="password">6-20个英文字母、数字或特殊字符</label><inputtype="password"id="password"name="password"/></div></td></tr><trclass="row"><tdclass="login_title"><em>*</em>确认密码:</td><td><divclass="text_info"><labelclass="text_hint"for="pwdconfirm"></label><inputtype="password"name="pwdconfirm"id="pwdconfirm"/></div></td></tr><trclass="row"><tdclass="login_title"><em>*</em>昵称:</td><td><divclass="text_info"><labelclass="text_hint"for="nickname">4-20个字符,建议使用中文,注册后不可修改</label><inputtype="text"id="nickname"name="nickname"/></div></td></tr></table><scriptlanguage="JavaScript">$(function(){//自动显/隐提示$('.text_info').find('input').bind("focus",function(){$(this).prev('label').hide();});$('.text_info').find('input').bind('blur',function(){if($(this).val()==''){$(this).prev('label').show();}});//初始化隐藏$('.text_info').find('input').each(function(){if($(this).val()!=''){$(this).prev('label').hide();}});})</script></body></html>

类似功能html5 placeholder

Java代码 <formaction="demo_form.asp"method="get"><inputtype="search"name="user_search"placeholder="SearchW3School"/><inputtype="submit"/></form>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。