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


Posted in Javascript onJune 05, 2015

用法:

首先在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>
Javascript 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
基于jQuery+JSON的省市二三级联动效果
Jun 05 #Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 #Javascript
判断访客终端类型集锦
Jun 05 #Javascript
JavaScript中constructor()方法的使用简介
Jun 05 #Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 #Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 #Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
require.js的用法详解
2015/10/20 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python对列表中的各项进行关联详解
2017/08/15 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python matplotlib实时画图案例
2020/04/23 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
大学生毕业自荐信
2013/10/10 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
幼儿园开学通知
2015/04/24 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python中字符串对象语法分享
2022/02/24 Python