Pengoptimuman kotak input HTML untuk meningkatkan pengalaman pengguna dan kemudahan penggunaan_HTML/Xhtml_Penghasilan halaman web

Untuk meningkatkan pengalaman pengguna dan kemudahan penggunaan, sesetengah pereka bentuk akan mengoptimumkan perkara yang pengguna kerap gunakan pada halaman web, seperti kotak input. Bagaimanakah kotak input umum dioptimumkan? Dari perspektif pengalaman pengguna, memudahkan langkah pengguna dan menjadikannya lebih mudah untuk pengguna meningkatkan kebolehgunaan Contohnya, menukar warna kotak input apabila tetikus melayang di atas kotak input, secara automatik memilih teks lalai dalam kotak input. , atau mengklik untuk memasukkan Kosongkan kandungan lalai secara automatik apabila kotak dibuka, dsb.

Kesan ini kedengaran rumit, tetapi ia sebenarnya sangat mudah untuk dilakukan Ia hanya memerlukan sekeping kod javascript yang pendek untuk menyelesaikannya. Berikut memperkenalkan kod untuk beberapa kesan.

1 Klik kotak input untuk memilih kod Html kandungan:

Salin kod

Kodnya adalah seperti berikut:

Input kandungan:< /label>

Bahagian paling penting dalam kod ini ialah bahagian onfocus jika tidak digunakan, kesan yang sama boleh dicapai dengan menggunakan onclick, seperti onfocus="this .pilih()".

2. Tukar warna sempadan atau warna latar belakang apabila tetikus melayang di atas kotak input

Terdapat dua kaedah untuk kesan ini: kaedah pertama ialah menggunakan elemen pseudo dalam CSS: fokus ; kaedah dua masih menggunakan Sekeping pendek javascript; 🎜>
Salin kod

Kod adalah seperti berikut: input:legar { border:1px pepejal #F00; 🎜>Apabila tetikus melayang di atas kotak input, sempadan kotak input akan bertukar menjadi merah, tetapi kaedah ini hanya sah dalam penyemak imbas Firefox dan IE7 atau lebih tinggi, dan IE6 tidak menyokongnya, jadi ia mempunyai had tertentu. Kod untuk kaedah dua kebanyakannya sama seperti contoh di atas, kecuali bahagian kod tuding tetikus ditambahkan pada penghujung:

Salin kod

Kodnya adalah seperti berikut:

< ;label untuk= "textfield">Input kandungan:

Gunakan ini kod, besar Kebanyakan pelayar boleh menyokongnya.

3 Klik kotak input dan teks lalai hilang

Terdapat kesan lain Apabila tetikus mengklik pada kotak input, teks lalai asal hilang. Jika anda memasukkan kandungan baharu yang lain dan kemudian menjauhkan tetikus, kandungan baharu kotak input kekal tidak berubah jika anda tidak memasukkan kandungan baharu, tetikus meninggalkan kotak input dan teks lalai dipulihkan. Kesan ini boleh dicapai dengan hanya menambah sekeping pendek javascript untuk menilai:

Salin kod


Kod adalah sebagai berikut:

Input kandungan :

Atribut pemegang tempat input boleh digunakan terus dalam HTML5:

Salin kod

Kodnya adalah seperti berikut:

Tiga kesan di atas adalah perbandingan Walaupun aplikasi javascript mudah telah melampaui skop kod Html, menguasainya memberikan kemudahan yang besar kepada aplikasi Html dan penghasilan halaman web, jadi apabila perlu, adalah perlu untuk menguasai beberapa javascript mudah.