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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
window.open()弹出居中的窗口
Feb 01 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
基于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伪造referer实例代码
2008/09/20 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
js导出txt示例代码
2014/01/14 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
微信小程序排坑指南详解
2018/05/23 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
python 爬取微信文章
2016/01/30 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python编写弹球游戏的实现代码
2018/03/12 Python
关于python写入文件自动换行的问题
2018/06/23 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
实习指导老师评语
2014/04/26 职场文书
辅导员评语
2014/05/04 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
小学国庆节活动总结
2015/03/23 职场文书
干部考核工作总结
2015/08/12 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
python文件目录操作之os模块
2021/05/08 Python