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

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

 23548  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();
相关插件-独立的部件,丰富的输入

jquery生成二维码

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

可停靠屏幕边缘的侧边栏插件

我自己封装的可停靠屏幕边缘的侧边栏插件,可以制作页面的通知信息,客服信息,联系方式等
  独立的部件
 36779  452

html5手势解锁插件H5lock.js

html5手势解锁插件H5lock.js详细注释
  独立的部件
 37625  368

js上下文菜单插件basicContext.js

basicContext.js 强大的纯Js上下文菜单插件
  独立的部件
 28190  386

讨论这个项目(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未测试

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