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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
详解vue 图片上传功能
Apr 30 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
dedecms模版制作使用方法
2007/04/03 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
奥林匹克的口号
2014/06/13 职场文书
禁止酒驾标语
2014/06/25 职场文书
单位接收函格式
2015/01/30 职场文书
公司门卫岗位职责
2015/04/13 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
win10更新失败无限重启解决方法
2022/04/19 数码科技