网上有好多关于这方面解决兼容性问题的文章,很多招式,学会这一招,让你轻松搞定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. 【BZOJ】2595: [Wc2008]游览计划

    题意 \(n * m\)的网格,如果\(a_{i, j} = 0\)则表示景点,否则表示这里的需要的志愿者人数.求一种安排志愿者的方案使得所有景点连通且志愿者最少. 分析 本题可以插头dp,然而有一个 ...

  2. Flex与.net进行URL参数传递编码处理

    在JS中用到的三种编码方式escape 对应于Flex中是一样的,并且支持相互的解码 var a:String = "超越梦想#"; trace(escape(a)); //%u8 ...

  3. 通过串口设备vid,pid自动获得该设备所对应的串口号

    用C#做串口通讯很方便,因为dotfx2.0已经集成了Serial Port控件,此控件使用上比MSComm控件更简单,当然它也有一个小bug (RecievedBytesThreshold设置有时候 ...

  4. IDictionary<TKey, TValue> vs. IDictionary

    Enumerating directly over an IDictionary<TKey,TValue>returns a sequence of  KeyValuePair struc ...

  5. 从就业面分析web前端开发工程师就业前景(2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  6. java.lang.UnsupportedClassVersionError: TwoSum : Unsupported major.minor version 52.0

    编译的版本比运行的版本高. 两台电脑,一个装的是jdk1.7,另一个是1.8,在1.8上运行之后,上传到github然后1.7的拉下来,再运行出现了上述错误. 解决方式:设置如下

  7. php二维数组的取值与转换

    while(list($key,$value) = each($arr)) { while(list($k,$v) = each($value)) { echo $key."==>&q ...

  8. 演示save point及自治事务的用处

    1.确认数据库版本 2 举一个例子,说明save point的用处,给出SQL演示. 2.1环境准备 save point的作用是通过在事务中间设置检查点,可以更加精细的控制事务,防止一部分操作错误而 ...

  9. uilmit 优化

    #!/bin/bash sed -i "/^ulimit -SHn.*/d" /etc/rc.local echo "ulimit -SHn 102400" & ...

  10. python操作Excel读写--使用xlrd和xlwt

    一.安装xlrd模块 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了python 环境. 进入到解压文件路径,输入 setup.py  ...