Komentar: Browser telah memperkenalkan banyak fitur HTML5. Salah satu favorit saya adalah memperkenalkan atribut placeholder untuk elemen input. Atribut placeholder menampilkan teks panduan sampai kotak input memperoleh fokus input. Saat pengguna memasukkan konten, konten panduan akan secara otomatis disembunyikan.
Alamat Asli: Atribut Placeholder HTML5Alamat demo: Placeholder
Tanggal Asli: 9 Agustus 2010
Tanggal Terjemahan: 6 Agustus 2013
Browser memperkenalkan banyak fitur HTML5: beberapa didasarkan pada HTML, beberapa dalam bentuk API JavaScript, tetapi semuanya sangat berguna. Salah satu favorit saya adalah pengenalan atribut placeholder untuk elemen input.
Properti placeholder menampilkan teks panduan sampai kotak input memperoleh fokus input. Saat pengguna memasukkan konten, konten panduan akan secara otomatis disembunyikan. Anda sudah pasti melihat teknik ini diimplementasikan dalam JavaScript ribuan kali, tetapi dukungan asli dari HTML5 umumnya lebih baik.
Kode HTML adalah sebagai berikut:
<input type = "text" placeholder = "Harap masukkan alamat permanen ...">
Yang harus Anda lakukan adalah menambahkan domain placeholder dan beberapa konten teks yang dipandu, dan tidak memerlukan skrip JavaScript tambahan untuk mencapai efek ini. Bukankah itu bagus?
Uji dukungan placeholder
(Perhatikan bahwa ini adalah artikel dari 2010. Sampai sekarang, pada tahun 2013, browser arus utama seharusnya mendukungnya.)
Karena placeholder adalah fitur baru, perlu untuk menguji dukungan browser. Kode JS adalah sebagai berikut:
// Buat elemen input di JS dan tentukan apakah elemen memiliki atribut yang disebut placeholder
// Jika browser mendukungnya, properti ini akan ada di DOM yang dirujuk dalam JS
fungsi hasplaceHoldersupport () {
var input = document.createElement ('input');
return ('placeholder' dalam input);
}
Jika browser tidak mendukung fitur placeholder, Anda memerlukan strategi fallback untuk menanganinya, seperti mootools, dojo, atau alat JavaScript lainnya. (Sekarang dojo dapat digunakan lebih sedikit, dan lebih banyak di Cina adalah jQuery dan extjs.)
/* Kode jQuery, tentu saja, ingatlah untuk memperkenalkan perpustakaan jQuery*/
$ (function () {
if (! hasplaceHoldersupport ()) {
// Dapatkan elemen alamat
var $ address = $ ("input [name = 'address']");
placeholder = $ address.attr ("placeholder");
// Bind Focus Event
$ address.bind ('focus', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
}
});
// acara fokus hilang
$ address.bind ('blur', function () {
if ('' == $ address.val ()) {
$ address.val (placeholder);
}
});
}
});
Placeholder adalah properti tambahan lain yang bagus untuk browser untuk menggantikan cuplikan JS, Anda bahkan dapat mengedit gaya placeholder HTML5.
Semua kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> HTML5 Placeholder Atribut Demonstrasi </iteme>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "asli = http: //davidwalsh.name/html5-placeHolder">
<skrip src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script>
// Buat elemen input di JS dan tentukan apakah elemen memiliki atribut yang disebut placeholder
// Jika browser mendukungnya, properti ini akan ada di DOM yang dirujuk dalam JS
fungsi hasplaceHoldersupport () {
var input = document.createElement ('input');
return ('placeholder' dalam input);
}
/* Kode jQuery, tentu saja, ingatlah untuk memperkenalkan perpustakaan jQuery*/
$ (function () {
if (! hasplaceHoldersupport ()) {
// Dapatkan elemen alamat
var $ address = $ ("input [name = 'address']");
placeholder = $ address.attr ("placeholder");
// Bind Focus Event
$ address.bind ('focus', function () {
if (placeholder == $ address.val ()) {
$ address.val ('');
}
});
// acara fokus hilang
$ address.bind ('blur', function () {
if ('' == $ address.val ()) {
$ address.val (placeholder);
}
});
}
});
</script>
</head>
<body>
<div>
<Form Method = "Post" Action = "">
<input type = "text" placeholder = "Harap masukkan alamat permanen ...">
<input type = "kirim" value = "test">
</form>
</div>
</body>
</html>