Pengenalan kepada pemegang tempat HTML5 (gesaan kosong) attribute_html5 kemahiran tutorial

Alamat asal: Atribut pemegang tempat HTML5
Alamat demo: demo pemegang tempat
Tarikh asal: 9 Ogos 2010
Tarikh terjemahan: Ogos 2013 Pada 6hb
penyemak imbas memperkenalkan banyak ciri HTML5: ada yang berdasarkan HTML, ada yang dalam bentuk API JavaScript, tetapi semuanya berguna. Salah satu kegemaran saya ialah pengenalan atribut pemegang tempat untuk elemen input.
Atribut pemegang tempat memaparkan teks pengenalan sehingga kotak input memperoleh fokus input Apabila pengguna memasukkan kandungan, kandungan pengenalan akan disembunyikan secara automatik. Anda sudah pasti melihat teknik ini dilaksanakan dalam JavaScript beribu-ribu kali, tetapi sokongan asli daripada HTML5 biasanya lebih baik.
Kod HTML adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

< input type="text" name="address" placeholder="Sila masukkan alamat tetap anda..."> dan beberapa kandungan Teks panduan, tiada skrip JavaScript tambahan diperlukan untuk mencapai kesan ini, bukankah rasanya hebat? , sehingga kini, Pada tahun 2013, semua pelayar utama harus menyokongnya.)
Memandangkan pemegang tempat ialah ciri baharu, adalah perlu untuk menguji sokongan penyemak imbas. Kod JS adalah seperti berikut:

Salin kod


Kod tersebut adalah seperti berikut:

// Dalam JS Cipta elemen input dan tentukan sama ada elemen itu mempunyai atribut yang dipanggil pemegang tempat // Jika penyemak imbas menyokongnya, atribut ini akan wujud dalam DOM yang dirujuk dalam js fungsi hasPlaceholderSupport() { var input = document.createElement('input');

return ('placeholder' dalam input); anda memerlukan satu strategi sandaran untuk dikendalikan, seperti MooTools, Dojo atau alatan JavaScript yang lain. (Dojo boleh digunakan kurang sekarang, dan jQuery dan ExtJS lebih biasa digunakan di China.)

Salin kod


The kod adalah seperti berikut :

/* kod jQuery, sudah tentu, ingat untuk memperkenalkan perpustakaan jQuery*/
$(function(){

if(!hasPlaceholderSupport()){

// Dapatkan elemen alamatvar $address = $("input[name='address']"); placeholder = $address.attr("placeholder"); Ikat acara fokus$address.bind('focus',function(){ if(placeholder == $address.val()){

$address.val('');

}

} );
// Acara fokus hilang
$address.bind('blur',function(){
if('' == $address.val()){
$address.val (tempat letak);
});
}
}); anda Anda juga boleh mengedit gaya pemegang tempat HTML5
Keseluruhan kod adalah seperti berikut:





Salin kod


Kodnya adalah seperti berikut:

Generator" content="EditPlus">




// Cipta elemen input dalam JS dan tentukan sama ada elemen itu mempunyai atribut yang dipanggil pemegang tempat
// Jika penyemak imbas menyokongnya, maka DOM yang dirujuk dalam js akan mempunyai fungsi
Properties ini hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' dalam input); perpustakaan jQuery*/
$(function(){
if(!hasPlaceholderSupport()){
// Dapatkan elemen alamat
var $address = $("input[name= 'address' ]");
tempat letak = $address.attr("tempat letak");
// Ikat acara fokus
$address.bind('focus',function(){
if(placeholder = = $address.val()){
$address.val('');
}
}); ,function(){
if('' == $address.val()){
$address.val(placeholder
}
} }
});