让Placeholder在IE中燥起来

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

网上有好多关于这方面解决兼容性问题的文章,很多招式,学会这一招,让你轻松搞定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一致)!

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航