A Look into Atribut Pemegang HTML5
Salah satu kepingan baru kegemaran saya dalam HTML5 adalah keupayaan untuk menambah Teks Pemegang Tempat dengan mudah. Teks ruang letak adalah teks abu-abu yang anda dapati dalam medan input yang digunakan untuk memberi petunjuk kepada pengguna tentang apa yang diharapkan dalam medan tersebut. Sekali pengguna mula menaip di input bidang, teks ini akan hilang.
Pada zaman dahulu, kita biasanya melakukan ini dengan JavaScript, seperti berikut;
Tidak ada yang salah dengan amalan ini, tetapi lebih mudah pada HTML5.
HTML5 memperkenalkan atribut baru dengan nama logik; pemegang tempat. Inilah contohnya:
Jika kita melihatnya pada pelayar, inputnya kini mempunyai teks kelabu, seperti yang dilihat di bawah;
Beberapa perkara yang harus diperhatikan: mengikut spesifikasi, pemegang tempat atribut tidak boleh digunakan sebagai alternatif kepada a label dan juga dicadangkan bahawa atribut ini hanya boleh digunakan untuk input jenis yang memerlukan teks, contohnya. teks, kata laluan, carian, e-mel, textarea dan tel.
Menambah pemegang tempat kepada input jenis: radio dan kotak semak tidak akan membuat perbezaan.
Placeholder & CSS
Selain itu, penggayaan teks pemegang tempat melalui CSS juga mungkin, tetapi pada masa penulisan ini masih terhad kepada hanya pelayar Firefox dan Webkit.
Contoh berikut menunjukkan bagaimana kita mengubah teks pemegang tempat menjadi hijau dalam Webkit dan Firefox;
input :: - webkit-input-placeholder color: green; input: -moz-placeholder color: green;
Hanya ingat, :: - webkit-input-placeholder dan : -moz-placeholder hanya akan menjejaskan teks dan tidak boleh ditulis secara selari.
input :: - webkit-input-placeholder, input: -moz-placeholder color: green;
Sekeping kod ini tidak akan berfungsi.
Pemilih Attribut
CSS3 juga datang untuk menyokong atribut ini dengan memperkenalkan [pemegang tempat] pemilih sifat;
input [ruang letak] sempadan: 1px pepejal hijau;
Dalam contoh di atas, kami memilih setiap input yang mempunyai pemegang tempat atribut dan ubah sempadan ke hijau.
Keserasian Penyemak Imbas
Ciri HTML5 baru ini tidak mengejutkan tidak disokong dalam penyemak imbas lama dan pada masa ini hanya disokong sepenuhnya dalam: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 dan Internet Explorer 10 (yang belum lagi dikeluarkan secara rasmi).
Polyfills Pemegang tempat
Walau bagaimanapun, jika kita perlu memaparkan pemegang tempat di pelayar lama tetapi masih boleh menggunakannya pemegang tempat atribut, kita boleh menggunakan Polyfills. Terdapat banyak Polyfills Pemegang tempat di luar sana tetapi dalam contoh ini kita akan menggunakan PlaceMe.js;
The PlaceMe.js, seperti yang anda lihat dari coretan kod di atas, bergantung kepada jQuery. Sekarang, jika kita melihatnya, sebagai contoh, Internet Explorer 9 semua input kini akan memaparkan teks pemegang tempat.
- Lihat Demo
- Muat turun Sumber
Pemikiran Akhir
The Pemegang tempat HTML5 atribut pastinya menjadikan penambahan teks pemegang tempat lebih mudah. Kini terpulang kepada kami, pemaju web dan pereka, untuk memilih cara yang digunakan: JavaScript atau HTML5.
Jika anda menganggap bahawa menggunakan Polyfills dan jQuery untuk menyokong penyemak imbas lama adalah berlebihan, maka JavaScript nampaknya lebih sesuai untuk tugas tersebut. Tetapi jika anda boleh mengabaikan peramban lama dengan tenang kemudian menggunakan Pemegang HTML5 mungkin cara yang lebih baik.
