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 相关文章推荐
jQuery获取和设置表单元素的方法
Feb 14 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
学习javascript文件加载优化
Feb 19 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 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变量存储的详解
2013/06/13 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python开发中module模块用法实例分析
2015/11/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python实现简单颜色识别程序
2020/02/19 Python
Python 如何展开嵌套的序列
2020/08/01 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
学生安全教育材料
2014/02/14 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
追悼会家属答谢词
2015/09/29 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python