Rumah > hujung hadapan web > tutorial js > Kongsi pemalam JQuery yang menyokong kesan ruang letak kotak teks dan kotak kata laluan di bawah IE_jquery

Kongsi pemalam JQuery yang menyokong kesan ruang letak kotak teks dan kotak kata laluan di bawah IE_jquery

WBOY
Lepaskan: 2016-05-16 16:16:39
asal
1081 orang telah melayarinya

Saya menulis pemalam ini lama dahulu Ia berdasarkan jQuery dan digunakan terutamanya untuk melaksanakan kesan pemegang tempat di bawah IE. Ia boleh menyokong kedua-dua kotak input teks dan kata laluan.

Pemegang tempat ialah atribut baharu HTML5 Apabila atribut input ditetapkan, kandungan nilai akan dipaparkan dalam kotak teks sebagai gesaan kelabu Apabila kotak teks mendapat fokus, teks gesaan akan hilang.

Alamat muat turun: http://xiazai.jb51.net/201501/other/placeholderfriend.rar

Kod pelaksanaan adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

(fungsi($) {
/**
* Pokok tanpa bunga
* 2012/11/28 15:12
,*/

var pemegang tempat rakan = {
fokus: fungsi {
s = $(s).hide().prev().show().focus();
var idValue = s.attr("id");
Jika (idValue) {
        s.attr("id", idValue.replace("placeholderfriend", ""));
}
var clsValue = s.attr("class");
jika (clsValue) {
        s.attr("class", clsValue.replace("placeholderfriend", ""));
}
}
}

//Tentukan sama ada pemegang tempat disokong
fungsi ialahPlaceholer() {
var input = document.createElement('input');
Kembalikan "pemegang tempat" dalam input;
}
//Kod tidak disokong
jika (!isPlaceholer()) {
$(fungsi() {

borang var = $(this);

//Lintas semua kotak teks dan tambahkan acara simulasi pemegang tempat
elemen var = form.find("input[type='text'][placeholder]");
       elemen.setiap(fungsi() {
        var s = $(this);
      var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (pValue) {
                jika (sNilai == '') {
          s.val(pValue);
          }
}
});

elemen.fokus(fungsi() {
        var s = $(this);
      var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (sValue && pValue) {
Jika (sValue == pValue) {
          s.val('');
          }
}
});

elemen.kabur(fungsi() {
        var s = $(this);
      var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (!sValue) {
        s.val(pValue);
}
});

//Lintas semua kotak kata laluan dan tambahkan acara simulasi pemegang tempat
var elementsPass = form.find("input[type='password'][placeholder]");
       elementsPass.each(fungsi(i) {
        var s = $(this);
      var pValue = s.attr("tempat letak");
var sValue = s.val();
Jika (pValue) {
                jika (sNilai == '') {
//DOM tidak menyokong pengubahsuaian jenis Anda perlu menyalin atribut kotak kata laluan dan menjana DOM baharu
               var html = this.outerHTML ||                   html = html.replace(/s*type=(['"])?password1/gi, "type=text placeholderfriend")
             .ganti(/s*(?:nilai|pada[a-z] |nama)(=(['"])?S*1)?/gi, " ")
             .ganti(/s*rakan pemegang tempat/, " nilai rakan pemegang tempat='" pValue
"' " "onfocus='placeholderfriendfocus(this);' ");
            var idValue = s.attr("id");
                jika (idValue) {
          s.attr("id", idValue "rakan pemegang tempat");
            }
            var clsValue = s.attr("class");
jika (clsValue) {
          s.attr("class", clsValue "rakan pemegang tempat");
            }
          s.hide();
             s.after(html);
          }
}
});

elementsPass.blur(function() {

        var s = $(this);
        var sValue = s.val();
            jika (Nilai == '') {
          var idValue = s.attr("id");
               jika (idValue) {
            s.attr("id", idValue "rakan pemegang tempat");
          }
          var clsValue = s.attr("class");
Jika (clsValue) {
            s.attr("class", clsValue "rakan pemegang tempat");
          }
            s.hide().next().show();
}
});

});

}
window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

Ia sangat mudah untuk digunakan, contohnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:












Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan