HTML5 bekerjasama dengan CSS3 untuk melaksanakan kotak input dengan teks segera (buang js)_html5 kemahiran tutorial

Saya sudah lama tidak menulis artikel teknikal Baru-baru ini saya telah membangunkan sistem menggunakan Webkit sebagai pembawa Sudah tentu, saya perlu menggunakan banyak Html5 dan CSS3, yang bukan sahaja mengurangkan banyak JS tetapi juga. memastikan pembangunan yang lebih lancar.

Apabila kotak dialog dipilih, teks gesaan menjadi lebih ringan dan hilang selepas input Amalan biasa sekarang ialah menambah Label selepas label Input. Gunakan kawalan JS.
Selepas HTML5 keluar, kami mempunyai cara yang lebih baik.

Salin kod

Kod adalah seperti berikut:

Kami melihat bahawa terdapat teg pemegang tempat, yang boleh digunakan sebagai gesaan teks pengguna. Ini sangat mudah. Tetapi untuk menjadi yang paling sempurna, kita perlu menjadikan teks lebih ringan atau mengubah suai gaya fail gesaan selepas memilihnya.

Salin kod

Kod tersebut adalah seperti berikut:

input::-webkit- input-placeholder {
warna: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit -input- pemegang tempat {
warna: #c2c2c2;
-webkit-transition: color.5s;
}

-webkit-input-placeholder, css unik untuk webkit yang boleh dikawal Gaya teks di dalam, digabungkan dengan kesan animasi dan kelas pseudo CSS3, kita boleh dengan mudah membuat kotak input animasi, yang sangat sesuai untuk log masuk sistem, carian, dll. Sudah tentu, jika anda ingin serasi dengan IE6, kaedah ini tidak akan berfungsi. Walau bagaimanapun, Ie9 juga menyokong teg pemegang tempat, tetapi warnanya tidak boleh diubah suai.
Jadi, apakah yang perlu saya lakukan jika ia tidak disokong? Anda hanya boleh menggunakan Jquery secara langsung untuk membantu, jadi ia adalah di luar skop artikel ini.
Beri saya Demo, Alamat demo Anda mesti menggunakan penyemak imbas Webkit untuk melihat kesan penuh. Bukankah ia sangat mudah?