/*
* jQuery placeholder, fix for IE6,7,8,9
* @author JENA
* @since 20131115.1504
* @website ishere.cn
*/
var JPlaceHolder = {
//检测
_check : function(){
return 'placeholder' in document.createElement('input');
},
//初始化
init : function(){
if(!this._check()){
this.fix();
}
},
//修复
fix : function(){
jQuery(':input[placeholder]').each(function(index, element) {
var self = $(this), txt = self.attr('placeholder');
self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
self.focusin(function(e) {
holder.hide();
}).focusout(function(e) {
if(!self.val()){
holder.show();
}
});
holder.click(function(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(function(){
JPlaceHolder.init();
});

IE下实现PlaceHolder的更多相关文章

  1. 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

    最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...

  2. 实用的placeholder插件,兼容IE下的placeholder,jquery插件

    placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...

  3. 不支持placeholder浏览器下对placeholder进行处理

    if(document.createElement('input').placeholder !== '') { $('[placeholder]').focus(function() { var i ...

  4. 让IE下支持Html5的placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...

  5. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  6. placeholder在不同浏览器下的表现及兼容方法(转)

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  7. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  8. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  9. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

随机推荐

  1. NOI 2002 营业额统计 (splay or fhq treap)

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  2. 你所未知的3种 Node.js 代码优化方式

    from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...

  3. scrapy系统学习(1)--概要

    本文操作环境:ubuntu14.04 一.安装Scrapy/Mysql/MySQLdb 参照官网教程安装Scrapy #sudo apt-key adv --keyserver hkp://keyse ...

  4. 8年javascript知识点积累

    08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题,刷新问题,等等.那时感觉javascri ...

  5. QT 网络编程三(TCP版)

    QT客户端 //widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QTcpSocket& ...

  6. Web Worker 是什么鬼?

    前言 前端工程师们一定有过这样的体验,当一个页面加载了大量的 js 文件时,用户界面可能会短暂地"冻结".这很好理解,因为 js 是单线程的语言.我们再走的极端点,一段 js 中出 ...

  7. 你真的理解 new 了吗?

    开篇先提几个问吧,如果你对这些问题都清楚了,那说明对于 new  这个关键字已经掌握得很好了,也不再需要花时间来阅读本文了, 1   new  一个class  与 new   一个Struct有什么 ...

  8. mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

    1.mvc5+ef6+Bootstrap 项目心得--创立之初 2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理 3.mvc5+ef6+Bootstrap 项目心得--WebG ...

  9. Java面试知识点总结

    本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺(阅读本文需要有一定的Java基础:若您初涉 ...

  10. 深入理解OOP(四): 多态和继承(抽象类)

    在本文中,我们讨论OOP中的热点之一:抽象类.抽象类在各个编程语言中概念是一致的,但是C#稍微有些不一样.本文中我们会通过代码来实现抽象类,并一一进行解析. 深入理解OOP(一):多态和继承(初期绑定 ...