Dalam panduan ini, kami akan mendapat pemahaman tentang cara melumpuhkan medan input menggunakan CSS. Jadi, Mari mulakan!
Bagaimana untuk Melumpuhkan Medan Input Menggunakan CSS?
Dalam CSS, acara dilumpuhkan dengan menggunakan ' penunjuk-peristiwa ” harta benda. Jadi, mula-mula, pelajari tentang sifat penunjuk-peristiwa.
Apakah itu Harta CSS 'pointer-events'?
' penunjuk-peristiwa ” mengawal cara elemen HTML bertindak balas atau berkelakuan kepada acara sentuh, seperti acara klik atau ketik, keadaan aktif atau tuding dan sama ada kursor kelihatan atau tidak.
Sintaks
Sintaks acara penunjuk diberikan seperti berikut:
penunjuk-peristiwa : auto | tiada ;
Harta yang disebutkan di atas mengambil dua nilai, seperti ' auto ” dan “ tiada ”:
- auto: Ia digunakan untuk melaksanakan acara lalai.
- tiada: Ia digunakan untuk melumpuhkan acara.
Menuju ke arah contoh yang diberikan.
Contoh 1: Menambah Medan Input Menggunakan CSS
Dalam contoh ini, pertama sekali, kami akan mencipta div dan menambah tajuk dan medan input kepadanya. Kemudian, tetapkan jenis input sebagai “ teks ” dan tetapkan nilainya sebagai “ Masukkan nama anda ”.
HTML
< div >< pusat >
< h1 > Lumpuhkan Medan Input < / h1 >
< input menaip = 'teks' nilai = 'Masukkan nama anda' >
< / pusat >
< / div >
Selepas itu, beralih ke CSS dan gayakan div dengan menetapkan warna latar belakangnya sebagai “ rgb(184, 146, 99) ” dan ketinggian sebagai “ 150px ”.
CSS
div {latar belakang- warna : rgb ( 184 , 146 , 99 ) ;
ketinggian : 150px;
}
Output kod yang diterangkan di atas diberikan di bawah. Di sini, kita dapat melihat bahawa medan input kami sedang aktif dan menerima input daripada pengguna:
Sekarang, beralih ke bahagian seterusnya di mana kita menggunakan nilai ' penunjuk-peristiwa ” harta sebagai “ tiada ”.
Contoh 2: Melumpuhkan Medan Input Menggunakan CSS
Kami kini akan menggunakan ' input ” untuk mengakses elemen yang ditambahkan dalam fail HTML dan tetapkan nilai acara penunjuk sebagai “ tiada ”:
input {penunjuk-peristiwa : tiada ;
}
Sebaik sahaja anda melaksanakan sifat yang dinyatakan di atas ' penunjuk-peristiwa ” dengan “ tiada ”, teks medan input tidak boleh diedit yang menunjukkan bahawa medan input kami dilumpuhkan:
Itu sahaja! Kami telah menerangkan kaedah melumpuhkan medan input menggunakan CSS.
Kesimpulan
Untuk melumpuhkan medan input dalam HTML, ' penunjuk-peristiwa ” sifat CSS digunakan. Untuk berbuat demikian, tambah medan input dan tetapkan nilai acara penunjuk sebagai “ tiada ” untuk melumpuhkan medan input. Dalam panduan ini, kami menerangkan kaedah melumpuhkan medan input menggunakan CSS dan memberikan contohnya.