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

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

表单控件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仿PhotoShop界面屏幕标尺插件

方便网页上在线测量图片的距离
  独立的部件
 4283  6

jQuery右键菜单插件contextmenu.js

jQuery右键链接弹出下拉菜单
  独立的部件
 1400  11

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 6522  70

doT.js 模板引擎

doT模板方便快捷的组织页面DOM
  独立的部件
 16627  36

讨论这个项目(18)回答他人问题或分享插件使用方法奖励jQ币

    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未测试

    回复
    极限天子 0
    2017/8/28 11:48:23

    不错,挺好的!

    不错,挺好的!

    不错,挺好的!

        nta.kim0
        2017/8/28 12:12:38
        有更新哦更新时间:2017/8/28 上午9:31:05
    回复
    nta.kim 0
    2017/8/21 12:32:43

    版本小更新一下!!!

    发现小的bug,更新审核通过后我会在此通知大家!

    回复
    ?・?・? 0
    2017/8/17 16:56:53

    只能支持8及其以上!!!

        nta.kim0
        2017/8/17 17:08:12

        IE7可以的,你那边时出现了什么问题吗

        ?・?・?0
        2017/8/17 17:17:30

        我什么都没做,就是用ie7查看了一下演示,你自己试试看

        nta.kim0
        2017/8/17 17:25:04

        我看过了,IE7上placeholder正常显示

    回复
    Avoidance month 0
    2017/8/17 15:48:33

    不错,挺好的

        nta.kim0
        2017/8/17 17:10:40

        O(∩_∩)O哈哈~

    回复
取消回复