jQuery插件EnPlaceholder实现输入框提示文字
用法:
首先在head中分别引入jQuery及本插件
<scripttype="text/javascript"src="jquery-1.7.2.min.js">script> <scripttype="text/javascript"src="jquery.enplaceholder.js">script>
然后就可以调用鸟
//通过value模拟placeholder $('input').placeholder(); //通过插入元素模拟placeholder $('input').placeholder({isUseSpan:true});
代码:
<scripttype="text/javascript"src="/demo/js/jquery.min.js"></script><scripttype="text/javascript"src="/demo/js/38/jquery.enplaceholder.js"></script> <styletype="text/css"> body{font:12px/1.5'simsun';} form{width:420px;height:260px;margin:20pxauto0;} h3{font-weight:bold;margin:10px0;} p{margin-bottom:10px;} input{vertical-align:middle;margin-left:10px;height:24px;line-height:24px;width:200px;padding-left:2px;} textarea{vertical-align:middle;margin-left:10px;width:200px;height:50px;font:inherit;padding-left:2px;} .wrap-statistics{visibility:hidden;} html{color:#000;background:#fff;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,hr,button{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5tahoma,arial;} input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} th{text-align:inherit;} img{border:0;} iframe{display:block;} em,th{font-style:normal;font-weight:500;} ol,ul{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;} a{text-decoration:none;} a:hover{text-decoration:underline;} .fn-clear{zoom:1;} .fn-clear:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;} .fn-hide{display:none;} .fn-left,.fn-right{display:inline;} .fn-left{float:left;} .fn-right{float:right;} .fn-hide-text{font-size:0;line-height:0;color:rgba(0,0,0,0);} .sl-wrap,.sl-wraptd,.sl-wrapth{word-wrap:break-word;word-break:break-all;} .sl-wrap-table{table-layout:fixed;}</style> <formid="form1"> <h3>通过value方式模拟placeholder</h3> <p>$('#form1input,#form1textarea').placeholder();</p> <p><labelfor="username1">用户名:</label><inputid="username1"name="username1"placeholder="请输入用户名"required=""type="text"value=""/></p> <p><labelfor="address1">地址:</label><inputid="address1"name="address1"placeholder="请输入地址"required=""type="text"value=""/></p> <p><labelfor="remarks1">备注:</label></p> </form> <formid="form2"> <h3>在不支持placeholder的浏览器下,通过插入悬浮的span元素方式模拟</h3> <h4>文本框内容改变时placeholder消失:</h4> <p>$('#username2,#password').placeholder({isUseSpan:true});</p> <p><labelfor="username2">用户名:</label><inputid="username2"name="username1"placeholder="请输入用户名"required=""type="text"value=""/></p> <p><labelfor="password">密码:</label><inputid="password"name="password"placeholder="请输入密码"required=""type="password"value=""/></p> <p><labelfor="remarks2">备注:</label></p> <h4>获得焦点时placeholder消失:</h4> <p>$('#address2').placeholder({isUseSpan:true,onInput:false});</p> <p><labelfor="address2">地址:</label><inputid="address2"name="address1"placeholder="请输入地址"required=""type="text"value=""/></p> </form> <script> $('#form1input,#form1textarea').placeholder(); $('#username2,#password').placeholder({isUseSpan:true}); $('#address2').placeholder({isUseSpan:true,onInput:false}); $('#remarks2').placeholder({isUseSpan:true}); </script>