网上有好多关于这方面解决兼容性问题的文章,很多招式,学会这一招,让你轻松搞定Placeholder的兼容性,叫我好人,拿走,不谢。。。。

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。

<input type="text" id="Title" class="so-input-d w270" placeholder="请输入标题" />

像下图用placeholder刚刚好,但是IE6 7 8 9 不支持呀,一篇空白!此时此刻心情肯定是日了狗!!!!!,搞web开发的一定要考虑兼容性,业界良心需要。。。。

使用前:

使用后:

疗效不一般,使用之后萌萌哒。

目前浏览器的支持情况:

浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari 
是否支持 NO YES YES YES YES

下面分享一个Js文件代码,简单粗暴的把问题解决了:

 (function ($) {
$.fn.myPlaceholder = function (options) {
var defaults = {
pColor: "#acacac",
pFont: "16px",
posL: 8,
zIndex: "99"
},
opts = $.extend(true, defaults, options); if ("placeholder" in document.createElement("input")) return;
return this.each(function () {
//$(this).parent().css("position", "relative");
var isIE = $.browser.msie,
version = $.browser.version; //不支持placeholder的浏览器
var $this = $(this),
msg = $this.attr("placeholder"),
iH = $this.outerHeight(),
iW = $this.outerWidth(),
iX = $this.offset().left,
iY = $this.offset().top,
oInput = $("<label>", {
"text": msg,
"css": {
"position": "absolute",
"left": iX + "px",
"top": iY + "px",
"width": iW - opts.posL + "px",
"padding-left": opts.posL + "px",
"height": iH + "px",
"line-height": iH + "px",
"color": opts.pColor,
"font-size": opts.pFont,
"z-index": opts.zIndex,
"cursor": "text"
}
}).insertBefore($this); //初始状态就有内容
var value = $this.val();
if (value.length > 0) {
oInput.hide();
};
var myEvent;
if (isIE && version < 9) {
myEvent = "propertychange";
} else {
myEvent = "input";
}
$this.bind(myEvent, function () {
var value = $(this).val();
if (value.length > 0) {
oInput.hide();
} else {
oInput.show();
}
});
oInput.click(function () {
$this.trigger("focus");
});
});
}
})(jQuery);

这是用JQUERY插件化思想的解决的!

在页面或者操作的Js文件只用这样轻轻一搞:

$(function () {
$("#Title").myPlaceholder();
});

Placeholder兼容问题就解决了(文章标红的地方注意ID一致)!

抓紧有限的时间,燥起来!

让Placeholder在IE中燥起来的更多相关文章

  1. placeholder在IE8中兼容性问题解决

    placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...

  2. 有关placeholder在ie9中的一点折腾

    有关placeholder在ie9中的一点折腾. placeholder属性定义: placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述). 问题 ...

  3. placeholder 解决UITextField中placeholder和text文本同时显示的问题

    TextField都使用了placeholder属性,但在代码中又设置了text属性,因此ViewController会同时显示placeholder文本和text文本. 这个问题让我彻底崩溃.按道理 ...

  4. tf.placeholder类似函数中的形参

    tf.placeholder(dtype, shape=None, name=None) 此函数可以理解为形参,用于定义过程,在执行的时候再赋具体的值 参数: dtype:数据类型.常用的是tf.fl ...

  5. ie8中使用placeholder

    placeholder 是 html5 中的新属性,考虑到还有不少 ie8 的用户,所以找了一个 ie8 的 placeholder 的补丁,如下: <script type="tex ...

  6. cocos2dx 中使用的一些C++ 11 特性

    0.  placeholder 头文件:<functional> namespace: placeholder placeholder 就是一堆帮助bind占参数位置的东西,名字分别为 _ ...

  7. placeholder的兼容处理(jQuery下)

    这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个. 1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容 2.处理好输入框上焦点和是焦点 ...

  8. DIV实现CSS 的placeholder效果

    placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素   但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

  9. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

随机推荐

  1. golang github.com/go-sql-driver/mysql 遇到的数据库,设置库设计不合理的解决方法

    golang github.com/go-sql-driver/mysql 遇到的数据库,设置库设计不合理的解决方法,查询中报了以下这个错 Scan error on column index 2: ...

  2. viso 由于形状保护和/或图层属性设置不能进行编辑

    viso 由于形状保护和/或图层属性设置不能进行编辑 2003: 若要变通解决此问题,删除 从删除 的保护属性,当您尝试删除一个受保护的组件.若要这样做,请按照下列步骤操作:在 Visio 2003或 ...

  3. C#反射生成简单sql语句

    static void Main(string[] args) { book book = new book();//实体类 booktest b1 = new booktest(); book.bo ...

  4. 放弃iOS4,拥抱iOS5

      前言 苹果在2011年的WWDC大会上发布了iOS5,不过考虑到要支持iOS4.x的系统,大多数App都无法使用iOS5的新特性.现在将近1年半过去了,从我们自己的App后台的统计数据.一些第三方 ...

  5. 32位的Win7系统下安装64位的Sql Sever?

    来自:http://zhidao.baidu.com/link?url=nQBoaLgoOyYCUdI7V4WZCMlTW3tKscdkOnLTIvlYtPpwoVhQkSahq44HeofBfzFT ...

  6. POJ 1016 模拟字符串

    Numbers That Count Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20396   Accepted: 68 ...

  7. JS开发windows phone8.1系列之1

    http://msdn.microsoft.com/zh-cn/library/windows/apps/dn629638.aspx,要点: 1.了解项目结构:package.appxmanifest ...

  8. windows bat 批处理 !vm 合并快播文件

    今天简单的写了一个bat批处理文件 用来处理快播的p2p的文件,一般回事这样的目录 你可以下载如下代码 @echo off for /r %%a in (.) do ( echo %%a cd %%a ...

  9. str_replace() 用法bug和技巧

    语法 str_replace(find,replace,string,count) 参数 描述 find 必需.规定要查找的值. replace 必需.规定替换 find 中的值的值. string ...

  10. Python强化训练笔记(四)——字典的排序

    假如有学生成绩以字典顺序排列:{'Tom': 87, 'Jack': 90, 'Rose': 100.....} 想要根据学生的成绩来进行排序,可以考虑使用sorted函数.但是sorted函数用在字 ...