Cara membuat elemen input baca sahaja menggunakan CSS

Dalam pembangunan web, elemen bentuk ialah jenis elemen yang sangat biasa. Elemen input adalah salah satu daripadanya, yang boleh menerima input pengguna, termasuk teks, nombor, tarikh, dll. Tetapi kadangkala kita perlu menetapkan elemen input kepada baca sahaja, yang bermaksud bahawa pengguna tidak boleh memasukkan apa-apa dan hanya boleh melihatnya. Artikel ini akan menerangkan cara menggunakan CSS untuk membuat elemen input baca sahaja.

Mula-mula, mari kita lihat cara elemen input biasa dicipta:

<input type="text" name="username" id="username">

Ini ialah kotak input teks asas di mana pengguna boleh memasukkan apa sahaja. Seterusnya, kita perlu menetapkannya kepada baca sahaja. Untuk melakukan ini, kita boleh menggunakan atribut "baca sahaja" elemen input, seperti yang ditunjukkan di bawah:

<input type="text" name="username" id="username" readonly>

Apabila atribut "baca sahaja" ditetapkan, pengguna tidak akan dapat memasukkan teks. Walau bagaimanapun, kaedah ini mempunyai kelemahan, iaitu, pengguna boleh mengubah suai atribut elemen input melalui alat penyuntingan dan menjadikannya boleh diedit. Oleh itu, kita perlu menggunakan CSS untuk mengawal status baca sahaja elemen input untuk memastikan ia dibaca sahaja dalam apa jua keadaan.

Menggunakan CSS untuk menetapkan elemen input kepada baca sahaja

Begini cara kita boleh menetapkan elemen input kepada baca sahaja menggunakan CSS. Mula-mula, kami menggunakan pemilih "input[readonly]" untuk memilih semua elemen input yang mengandungi atribut "readonly" dan kemudian kami menambah sifat gaya CSS "pointer-events:none" dan "background-color:#eee" pada ia.

input[readonly] {
   pointer-events:none;
   background-color:#eee;
}

Atribut "pointer-events:none" akan menghalang pengguna daripada melakukan sebarang operasi pada elemen input baca sahaja melalui tetikus atau peranti penunjuk lain, seperti klik, pergerakan tetikus masuk/keluar , dsb. Ia memastikan elemen input tidak disalahgunakan oleh pengguna.

Atribut "warna latar belakang:#eee" adalah untuk membezakan elemen input baca sahaja daripada elemen input boleh edit lain, menjadikannya lebih mudah untuk dibezakan.

Ini ialah gaya CSS lengkap untuk elemen input baca sahaja:

input[readonly] {
   pointer-events:none;
   background-color:#eee;
   border:none;
   color:#999;
}

Dalam gaya ini, kami turut menambah atribut "border:none" dan "color:#999" . Ini akan menjadikan elemen input baca sahaja lebih gelap untuk membezakannya daripada elemen lain yang boleh diedit.

Sudah tentu, anda boleh menyesuaikan gaya ini mengikut keperluan anda. Sebagai contoh, anda boleh menetapkan warna latar belakang elemen input baca sahaja kepada kelabu dan warna fon kepada kelabu gelap agar lebih sesuai dengan gaya tapak web anda.

Nota terakhir ialah semasa menggunakan CSS untuk menetapkan elemen input baca sahaja memastikan ia dibaca sahaja dalam semua keadaan, data yang datang daripada pelayan masih perlu disahkan dan ditapis. Khususnya, pengesahan dan pemprosesan data borang perlu dikendalikan dengan berhati-hati.

Kesimpulan

CSS ialah alat yang sangat berkuasa yang membolehkan kami mengawal gaya elemen di tapak web dengan mudah, termasuk keadaan baca sahaja elemen input. Dengan menggunakan "pointer-events:none" dan "background-color:#eee", kami boleh memastikan bahawa elemen input adalah baca sahaja dalam apa jua keadaan dan mengelakkan salah guna pengguna. Pada masa yang sama, kita juga perlu memberi perhatian kepada pengesahan dan penapisan data borang untuk memastikan keselamatan data.

Atas ialah kandungan terperinci Cara membuat elemen input baca sahaja menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!