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>