Jquery修復(fù)IE瀏覽器placeholder不顯示問題

放到一個JS文件里面,直接引入即可

//解決ie下 input 的placeholder不顯示問題
var JPlaceHolder = {
    //檢測
    _check: function() {
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init: function() {
        if(!this._check()) {
            this.fix();
        }
    },
    //修復(fù)
    fix: function() {
        jQuery(':input[placeholder]').each(function(index, element) {
            var self = $(this),
                txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({
                display:'inline-block',
                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,
                lineHeight: h +"px",
                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();
            });
            console.log(h)
        });
    }
};
//執(zhí)行
jQuery(function() {
    JPlaceHolder.init();
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載 前言 見解有限,如有描述不當(dāng)之處,請幫忙及時指出,如有錯誤,會及時修正。 ----------超長文+多圖預(yù)...
    程序員之路閱讀 1,185評論 3 21
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,458評論 0 21
  • Node.js是目前非?;馃岬募夹g(shù),但是它的誕生經(jīng)歷卻很奇特。 眾所周知,在Netscape設(shè)計出JavaScri...
    w_zhuan閱讀 3,731評論 2 41
  • 嗯,也許是想到下班的微風(fēng)讓我又想起了你,我還好,你呢?
    寂靜里安然閱讀 171評論 0 0
  • 投射我兒寒假期間,努力學(xué)習(xí),認真完成各類寒假作業(yè),有計劃,有目標(biāo),心態(tài)穩(wěn)定,戒驕戒躁,成績穩(wěn)定上升,開學(xué)第一次考試...
    花開生兩面閱讀 174評論 0 0

友情鏈接更多精彩內(nèi)容