input placeholder属性IE、360浏览器兼容性问题
效果：http://hovertree.com/texiao/jquery/43/
效果二：http://hovertree.com/texiao/jquery/43/1/
请在IE中体验。
1、创建JS文件：jquery.JPlaceholder.js
js代码如下：
/*
* jQuery placeholder, fix for IE6,7,8,9
* hovertree.com
*/
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();
});
2、页面中使用方法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery JPlaceholder Demo - 何问起</title>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.8.3.min.js"></script>
<script src="http://hovertree.com/texiao/jquery/43/jquery.JPlaceholder.js"></script>
</head> <body>
<form>
<div>
<ul>
<li>
<input type="text" name="username" placeholder="用户名">
</li>
<li>
<input type="password" name="username" placeholder="密码">
</li>
<li>
<button type="button">登录</button>
</li>
</ul>
</div>
</form>
<a href="http://hovertree.com/h/bjaf/ww7ek8wn.htm">参考</a>
</body>
</html>
实践是检验真理的唯一标准，希望能帮助到大家。
参考：http://hovertree.com/h/bjaf/ww7ek8wn.htm
input placeholder属性IE、360浏览器兼容性问题的更多相关文章
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 完美让IE兼容input placeholder属性的jquery实现
调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...
- HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失
H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...
- HTML <input> placeholder 属性
css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...
- html5 <input> placeholder 属性
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
随机推荐
- [转] IE6中请求莫名中断
这两天碰到的问题,IE6下某个js生成的a节点,设置了href="javascript:;",点击时触一个ajax请求,但在IE6下就是无法执行succese里的内容,所以就用se ...
- centos7 linux 安装jdk8
1.下载64位jdk8 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.在 ...
- [转载] A set of top Computer Science blogs
This started out as a list of top Computer Science blogs, but it more closely resembles a set: the o ...
- fast db 学习
见 http://code.google.com/p/mmdbsolution/source/browse/trunk/+mmdbsolution+--username+SiliangDu1987%4 ...
- Spark 实时计算整合案例
1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...
- How to Debug Enterprise Portal Code in Dynamics AX 2009
转载 To set up debugging for pages1. Log into the server that is running the AOS.2. Open the Microsoft ...
- BZOJ 1006 [HNOI2008] 神奇的国度（简单弦图的染色）
题目大意 K 国是一个热衷三角形的国度,连人的交往也只喜欢三角原则.他们认为三角关系:即 AB 相互认识,BC 相互认识,CA 相互认识,是简洁高效的.为了巩固三角关系,K 国禁止四边关系,五边关系等 ...
- 读书笔记_Effective_C++_条款四十五：运用成员函数模板接受所有兼容类型
比如有一个Base类和一个Derived类,像下面这样: class BaseClass {…}; class DerivedClass : public BaseClass {…}; 因为是父类与子 ...
- java 动态创建数据库和动态连接数据库
项目中有一个需求要动态创建数据库并且要动态连接数据库,本来以为还很难实现呢,在网上找了好久,都不是很理想,最后看到有人说创建数据库时,先连接到任意一个数据库,获得连接后用createStatement ...
- apache+tomcat整合后的编码问题
apache+tomcat整合提供webserver服务的方式是为了实现两个目的:一是方便利用apache http server将客户请求均衡的分给tomcat1,tomcat2....去处理,即负 ...