jQuery插件EnPlaceholder实现输入框提示文字

 更新时间:2015年06月05日 11:24:39   投稿:hebedich  
EnPlaceholder插件支持密码框哦!实际对比同类的placeholder插件在ie等浏览器下效果要好很多!下面我们来具体探讨下此插件的使用方法吧。

用法:

首先在head中分别引入jQuery及本插件

<script type="text/javascript" src="jquery-1.7.2.min.js">script> 
<script type="text/javascript" src="jquery.enplaceholder.js">script> 

然后就可以调用鸟

//通过value模拟placeholder 
$('input').placeholder(); 
//通过插入元素模拟placeholder 
$('input').placeholder({isUseSpan:true}); 

代码:

 <script type="text/javascript" src="/demo/js/jquery.min.js"></script><script type="text/javascript" src="/demo/js/38/jquery.enplaceholder.js"></script>
<style type="text/css">
body { font: 12px/1.5 'simsun'; }
form { width: 420px; height: 260px; margin: 20px auto 0; }
h3 { font-weight: bold; margin: 10px 0; }
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.5 tahoma,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-wrap td,.sl-wrap th{word-wrap:break-word;word-break:break-all;} 
.sl-wrap-table{ table-layout:fixed; }</style>
<form id="form1">
 <h3>通过value方式模拟placeholder</h3>
 <p>$('#form1 input,#form1 textarea').placeholder();</p>
 <p><label for="username1">用户名:</label> <input id="username1" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p>
 <p><label for="address1">地 址:</label> <input id="address1" name="address1" placeholder="请输入地址" required="" type="text" value="" /></p>
 <p><label for="remarks1">备 注:</label></p>
</form>
<form id="form2">
 <h3>在不支持placeholder的浏览器下,通过插入悬浮的span元素方式模拟</h3>
 <h4>文本框内容改变时placeholder消失:</h4>
 <p>$('#username2,#password').placeholder({isUseSpan:true});</p>
 <p><label for="username2">用户名:</label> <input id="username2" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p>
 <p><label for="password">密 码:</label> <input id="password" name="password" placeholder="请输入密码" required="" type="password" value="" /></p>
 <p><label for="remarks2">备 注:</label></p>
 <h4>获得焦点时placeholder消失:</h4>
 <p>$('#address2').placeholder({isUseSpan:true,onInput:false});</p>
 <p><label for="address2">地 址:</label> <input id="address2" name="address1" placeholder="请输入地址" required="" type="text" value="" /></p>
</form>
<script>
 $('#form1 input,#form1 textarea').placeholder();
 $('#username2,#password').placeholder({isUseSpan:true});
 $('#address2').placeholder({isUseSpan:true,onInput:false});
 $('#remarks2').placeholder({isUseSpan:true});
</script>

相关文章

  • jQuery实现滚动效果

    jQuery实现滚动效果

    这篇文章主要为大家详细介绍了jQuery实现滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)

    cookie 是存储于访问者计算机中的变量。这篇文章主要介绍了jQuery利用cookie 实现本地收藏功能不重复无需多次命名,需要的朋友可以参考下
    2019-11-11
  • 详解jQuery如何实现模糊搜索

    详解jQuery如何实现模糊搜索

    这篇文章主要介绍了jQuery如何实现模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • jquery自定义放大镜效果

    jquery自定义放大镜效果

    这篇文章主要为大家详细介绍了jquery自定义放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • jQuery封装animate.css的实例

    jQuery封装animate.css的实例

    下面小编就为大家分享一篇jQuery封装animate.css的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • jQuery ajax应用总结

    jQuery ajax应用总结

    Ajax在Web应用中的作用越来越大,许多工具都包含了对这一功能的使用,以下是对这些常用工具中Ajax的典型实例.
    2016-06-06
  • jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

    jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

    这篇文章主要介绍了jQuery获取所有父级元素及同级元素及子元素的方法,本文给大家介绍的非常详细,具有参考借鉴价值 ,需要的朋友可以参考下
    2018-01-01
  • JQuery查找DOM节点的方法

    JQuery查找DOM节点的方法

    这篇文章主要介绍了JQuery查找DOM节点的方法,实例分析了jQuery选择器实现DOM元素结点与属性结点的查找技巧,需要的朋友可以参考下
    2015-06-06
  • 基于jquery封装的一个js分页

    基于jquery封装的一个js分页

    基于jquery封装的一个js分页代码,需要的朋友可以参考下。
    2011-11-11
  • jquery实现Li滚动时滚动条自动添加样式的方法

    jquery实现Li滚动时滚动条自动添加样式的方法

    这篇文章主要介绍了jquery实现Li滚动时滚动条自动添加样式的方法,实例分析了jquery响应鼠标事件及动态添加样式的相关技巧,需要的朋友可以参考下
    2015-08-08

最新评论