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属 ...
随机推荐
- puma vs passenger vs rainbows! vs unicorn vs thin 适用场景 及 performance
ruby的几个web server,按照开发活跃度.并发方案及要点.适用场景等分析puma vs passenger vs rainbows! vs unicorn vs thin. 1. thin: ...
- WCF 数据服务 4.5
.NET Framework 4.5 其他版本 WCF 数据服务(以前称为"ADO.NET Data Services")是 .NET Framework 的一个组件.可以使用此组 ...
- Flash Builder中“Error: #2036 加载未完成”错误的解决方法
复制了一个名称为A的widget包,重命名为B,包含B.mxml和B.xml(配置文件),编译后无法加载B包创建的widget,报错为: 解决办法: 1.在工程的根目录下找到.actionScript ...
- 让MyEclipse2013兼容Retina屏幕
1. 找到文件:/Applications/MyEclipse/MyEclipse Professional.app/Contents/Profile/myeclipse.app/Contents/I ...
- Linux下配置ip地址四种方法
linux系统安装完,以后通过命令模式配置网卡IP.配置文件通常是/etc/sysconfig/network-scripts/ifcfg-interface-nameifconfig后显示的内容,l ...
- SQLSERVER吞噬内存解决记录
现在手上有一个不大不小的系统,运行了一段时间,因为是24*7不断运行,所以内存逐渐增高,慢慢的会飙到95%以上,然后不得不重启电脑,因为用的是云,怕虚拟机重启down掉起不来,重启操作还只能在凌晨4. ...
- Spring mvc4 + ActiveMQ 整合
一.配置部分 二.代码部分 三.页面部分 四.Controller控制器 五.效果展示 六.加入监听器 七.最最重要的,别忘了打赏 一.配置部分 ActiveMQ的安装这就不说了,很简单, 这个例子采 ...
- python问题：IndentationError:expected an indented block错误解决
Python语言是一款对缩进非常敏感的语言,给很多初学者带来了困惑,即便是很有经验的Python程序员,也可能陷入陷阱当中.最常见的情况是tab和空格的混用会导致错误,或者缩进不对,而这是用肉眼无法分 ...
- Linux探秘之用户态与内核态
一. Unix/Linux的体系架构 如上图所示,从宏观上来看,Linux操作系统的体系架构分为用户态和内核态(或者用户空间和内核).内核从本质上看是一种软件——控制计算机的硬件资源,并提供上层应用程 ...
- Android动态设置android:drawableLeft|Right|Top|Bottom 并根据分辨率自适应
http://blog.sina.com.cn/s/blog_4b93170a0102e1m9.html //调用setCompoundDrawables时,必须调用Drawable.setBound ...