Bagaimana untuk melaksanakan input css baca sahaja

Dalam reka bentuk web kami, kami sering menggunakan elemen input untuk melaksanakan fungsi kotak input. Tetapi dalam beberapa kes, kami tidak mahu pengguna dapat mengubah suai kandungan kotak input ini, seperti memaparkan beberapa maklumat teks baca sahaja. Pada masa ini, kita boleh menggunakan atribut baca sahaja baca sahaja elemen input untuk mencapai keperluan ini.

Atribut baca sahaja bagi elemen input adalah untuk menetapkan kotak input kepada keadaan baca sahaja, iaitu, pengguna boleh melihat kandungan dalam kotak input, tetapi tidak boleh mengubah suai atau memadam kandungan. Ini sangat berguna untuk senario di mana beberapa maklumat perlu dipaparkan kepada pengguna, seperti nombor pesanan, penerangan produk, dsb.

Dalam CSS, kita boleh menggunakan atribut berikut untuk menetapkan status baca sahaja elemen input:

1. baca sahaja

Gunakan atribut baca sahaja untuk menetapkan elemen input Tetapkan kepada status baca sahaja. Seperti yang ditunjukkan di bawah:

2. dilumpuhkan

Gunakan atribut dilumpuhkan untuk memasukkan Elemen ditetapkan kepada keadaan dilumpuhkan dan pengguna tidak boleh mengklik atau mengambil sebarang tindakan. Walau bagaimanapun, kandungan dalam kotak input tidak boleh disalin dalam kes ini. Seperti yang ditunjukkan di bawah:

Apabila kita ingin menukar status baca sahaja elemen input, terdapat dua perkara biasa kaedah :

1. Gunakan JavaScript untuk mengubah suai nilai atribut secara dinamik

Ubah suai nilai atribut baca sahaja elemen input secara dinamik melalui skrip JavaScript untuk mengawal status baca sahajanya . Seperti yang ditunjukkan di bawah:

document.getElementById("myInput").readOnly = true;
document.getElementById("myInput").readOnly = false;

2. Gunakan CSS Pemilih memilih kotak input baca sahaja

Pilih elemen input baca sahaja melalui pemilih CSS, dan kemudian tambahkan gaya padanya untuk menukar penampilannya atau mencetuskan kesan lain. Seperti yang ditunjukkan di bawah:

input[baca sahaja] {
warna: #ccc;
kursor: tidak dibenarkan;
}

Ringkasan

dalam Apabila mereka bentuk halaman web, kotak input baca sahaja adalah ciri yang sangat praktikal. Apabila menggunakan elemen input, kami boleh menetapkannya kepada keadaan baca sahaja melalui atribut baca sahaja untuk mencapai keperluan reka bentuk kami. Selain itu, menggunakan pemilih CSS dan skrip JavaScript juga merupakan cara biasa untuk menukar keadaan kotak input baca sahaja.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan input css baca sahaja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!