Analisis dan penyelesaian kepada masalah ketidakserasian teg baharu Pemegang Tempat HTML5 dalam pelayar versi lebih rendah _html5 kemahiran tutorial-Tutorial H5-php.cn

Analisis dan penyelesaian kepada masalah ketidakserasian teg baharu Pemegang Tempat HTML5 dalam pelayar versi lebih rendah _html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:46:02

asal

1824 orang telah melayarinya

Atribut pemegang tempat ialah atribut baharu dalam HTML5, yang biasanya dikenali sebagai "tempat letak". akan memaparkan teks lalai , saya rasa semua orang mesti menggunakan js/jquery untuk mencipta kesan sedemikian. Pada masa ini, ia hanya disokong oleh pelayar moden seperti Mozilla Firefox 3.7, Apple Safari 4, Google Chrome 4 dan Opera11. ”
Atribut pemegang tempat ditambah untuk input dalam HTML5 Sediakan pemegang tempat pada input untuk memaparkan maklumat pembayang (petunjuk) nilai jangkaan medan input dalam bentuk teks .
Contoh:

Salin kod

Kodnya adalah seperti berikut:

Pemegang tempat sangat mudah untuk dikendalikan, yang meningkatkan kecekapan pembangunan Pada masa yang sama, pengalaman pengguna juga sangat baik dalam pelayar versi yang lebih tinggi, jadi saya sangat suka menggunakan atribut ini.

Walau bagaimanapun, ia tidak sah dalam penyemak imbas di bawah IE9 dan IE10 menyokong atribut pemegang tempat dan prestasinya tidak konsisten dengan penyemak imbas lain •Dalam IE10, teks pemegang tempat hilang apabila tetikus diklik (mendapat fokus)

• Klik Firefox/Chrome/Safari tidak hilang, tetapi teks hilang apabila menaip pada papan kekunci
Jadi sebagai pembangun, patutkah saya mengatasi masalah ini? Pada masa ini terdapat banyak penyelesaian yang serupa di Internet, dan idea pelaksanaan dibahagikan secara kasar kepada dua jenis:
1 (Kaedah 1) Gunakan nilai input sebagai teks paparan, simulasi gaya kelabu dan fokus pada $("[placeholder]").val ()=="", blur $("[placeholder]").val(this.defaultValue); (Kaedah 2) Jangan gunakan nilai, tambah tag tambahan (span) pada badan dan kemudian Kedudukan mutlak meliputi input.
Memandangkan kaedah pertama dilaksanakan di sini, ia menduduki nilai dan memerlukan pertimbangan tambahan semasa pengesahan, jadi saya secara peribadi mengesyorkan menggunakan kaedah kedua.
Mula-mula, tentukan sama ada penyemak imbas semasa menyokong atribut pemegang tempat:

Salin kod

Kod adalah seperti berikut : function placeholderSupport() {

kembali 'placeholder' dalam document.createElement('input');

}

Kod kunci pada
:

Salin kod

Kod tersebut adalah seperti berikut: /*

*pemegang tempat serasi dengan ie9 dan ke bawah Pengarang: Gao Fengming add 27-1-2016

$(function(){
if(!placeholderSupport()){ / / Tentukan sama ada penyemak imbas menyokong pemegang tempat
$(document).ready(function(){
//Gelung traversal lalai menambah pemegang tempat
$('[placeholder]').each(function(){
$(ini).append("" $(this).attr('placeholder') ""); )
$('[ pemegang tempat]').blur(function(){
if($(this).val()!=""){ //Jika nilai semasa tidak kosong, sembunyikan pemegang tempat
$(ini).ibu bapa ().cari('span.tempat letak').sembunyikan();
}
lain{
$(ini).ibu bapa().cari(' span.placeholder').show();
}
})
});
});
Kandungan di atas memperkenalkan kepada anda analisis dan penyelesaian ketidakserasian teg Pemegang Tempat HTML5 baharu dalam penyemak imbas versi yang lebih rendah.