表单控件placeholder属性兼容IE低版本(不影响表单校验)

所属分类:其他,输入-独立的部件,丰富的输入

 23535  311  查看评论 (24)
分享到微信朋友圈
X
表单控件placeholder属性兼容IE低版本(不影响表单校验) ie兼容7

更新时间:2017/8/28 上午9:31:05

更新说明:

    1. 修改 $.fn.isIE ,原来是一个方法,现改为属性,使用由 $.isIE() 改为 $.isIE

    2. 简化 placeholder 方法的代码,将监听事件改为即时事件 propertychange


更新时间:2017/8/22 上午9:52:58

更新说明:

    1. 重复调用 $(selector).placeholder() 将不会重复渲染带有placeholder属性的DOM元素;

    2. 页面上临时新增的元素,可以使用 $('[placeholder]').placeholder() 进行再次渲染;


更新时间:2017/8/21 下午12:39:27

更新说明:

    1. Demo 移除了select元素,增加了密码控件;

    2. placeholder.js有改动,目的是修复BUG: 当控件value不为空时,placeholder文本应该舒适化状态为隐藏。


插件内有一些参数可供自定义,但默认的其实是最好的:

//default options
var opts = {
	//是否使用内置样式
	useDefaultStyle : true,
	//placeholder文字css类名
	placeClassName : 'placeholder',
	//input父类名
	parentClassName : 'placeholder-parent',
	//input父类CSS
	parentStyle : 'position:relative;display:inline-block;overflow:hidden;',
	//placehodler元素CSS
	placeStyle : 'position:absolute;z-index:2;top:50%;left:0;width:100%;margin-top:-10px;padding:0;box-sizing:border-box;text-align:left;color:#999;line-height:20px;font-size:13px;white-space:nowrap;'
};

使用方法很简单:

//引入placeholder.js
<script charset="utf-8" src="placeholder.js"></script>
//调用
$('[placeholder]').placeholder();
相关插件-独立的部件,丰富的输入

新浪天气、时间获取插件

LeoWeather 是一款专门用来获取天气和时间的插件,本插件自创的标签模式使得用户可以更好的对显示内容进行排版!
  独立的部件
 56595  501

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 43103  359

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 62125  435

jquery生成二维码

jquery生成二维码
  独立的部件
 52850  457

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ricefoto 0
    2019/7/10 9:02:58
    IE10-11会出现两个内容重叠 回复
    鸭鸭 0
    2019/5/20 14:49:35
    测试了一下 ie6不通过 回复
    agenting 0
    2018/3/1 17:40:42
    不错, 支持 password 吗?
        nta.kim0
        2018/3/2 8:36:56
        是的
    回复
    念你1 0
    2018/1/31 9:26:04

    哪个js是啊???名字起的是什么?

        nta.kim0
        2018/1/31 14:34:44

        placeholder.js

    回复
    nta.kim 0
    2017/10/17 20:24:03

    觉得好用大家点一个红心哈,让更多人用上这个O(∩_∩)O~

    回复
    nta.kim 0
    2017/10/17 20:22:47

    大家如果没有jq币,就在演示页面打开控制台,自己另存为placeholder.js就可以了。使用方法在还和上面?写的一样

    回复
    寒枫落叶 0
    2017/10/16 13:33:13
    自招 0
    2017/9/20 15:08:26
    自招 0
    2017/9/20 14:07:28
    type是password时可以用吗
        nta.kim0
        2017/9/20 14:23:51

        keyi 可以

    回复
    特雷西 0
    2017/9/5 9:25:03
    这个最低兼容IE几啊
        nta.kim0
        2017/9/5 9:27:48

        最低IE7,

        IE6未测试

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复