kawalan css baca sahaja

Kawalan CSS baca sahaja: Cara menggunakan CSS untuk melaksanakan kawalan baca sahaja bagi borang HTML

Sebagai pembangun bahagian hadapan, anda selalunya perlu mereka bentuk dan melaksanakan borang HTML. Kadangkala anda perlu membuat medan tertentu baca sahaja. Kandungan medan baca sahaja boleh dilihat oleh pengguna, tetapi tidak boleh diubah suai. Ini menghalang pengguna daripada mengubah suai data borang secara tidak perlu dan melindungi integriti dan ketepatan data. Artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan kawalan baca sahaja bagi borang HTML.

Dalam borang HTML, terdapat dua cara untuk membuat medan baca sahaja: menggunakan atribut HTML "baca sahaja" atau menggunakan gaya CSS. Kami akan menggunakan CSS untuk mengawal baca sahaja kerana kaedah ini lebih fleksibel dan lebih mudah dikawal.

Dalam CSS, anda boleh menggunakan atribut "pointer-events" untuk mengawal atribut baca sahaja medan borang. Pointer-events ialah sifat baharu CSS3, yang digunakan terutamanya untuk mengawal sama ada peristiwa tetikus elemen boleh dicetuskan. Apabila "pointer-events:none" ditetapkan, ini bermakna elemen itu tidak akan bertindak balas kepada sebarang peristiwa tetikus, iaitu, elemen menjadi kawalan baca sahaja. Sekarang mari kita lihat langkah-langkah khusus:

1 Tambah elemen borang dalam HTML

Mula-mula, tambah elemen borang yang perlu ditetapkan kepada baca sahaja dalam kod HTML, seperti. kotak teks dan kotak kata laluan, kotak lungsur, dsb. Berikut ialah contoh mudah:

<label>用户名</label>
<input type="text" name="username" id="username" />

<label>密码</label>
<input type="password" name="password" id="password" />

<label>性别</label>
<select name="gender" id="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>

2 Tambahkan gaya CSS baca sahaja pada elemen borang

Seterusnya, tambahkan elemen borang yang perlu ditetapkan kepada baca sahaja dalam CSS. fail atau gaya teg. Elemen boleh dibuat baca sahaja menggunakan atribut "pointer-events:none". Pada masa yang sama, anda boleh menambah gaya berbeza pada medan ini untuk menyerlahkannya. Berikut ialah contoh:

input[readonly], select[readonly] {
  pointer-events:none;
  background-color:#f0f0f0;
  color:#888;
}

Dalam contoh ini, kami menggunakan "pointer-events:none" untuk menetapkan elemen kepada baca sahaja. Tetapkan juga warna latar belakang kepada kelabu muda, warna fon kepada kelabu gelap dan tambah atribut "baca sahaja" pada elemen. Akibatnya, warna latar belakang elemen bentuk ini berubah kepada kelabu muda dan warna fon menjadi kelabu gelap dan tidak boleh diubah suai.

3 Gunakan JavaScript untuk mengawal status baca sahaja

Selain menggunakan gaya CSS untuk mengawal status baca sahaja, kami juga boleh menggunakan JavaScript untuk mengawal status baca sahaja bagi unsur bentuk. Apabila menggunakan JavaScript, anda perlu menambah pendengar acara pada elemen borang, supaya apabila status baca sahaja elemen borang berubah, fungsi JavaScript yang sepadan akan dipanggil. Berikut ialah contoh:

<input type="button" value="取消只读" onclick="makeReadonly(false)" />
<input type="button" value="设置只读" onclick="makeReadonly(true)" />

<script type="text/javascript">
function makeReadonly(isReadonly) {
  document.getElementById("username").readOnly = isReadonly;
  document.getElementById("password").readOnly = isReadonly;
  document.getElementById("gender").disabled = isReadonly;
  
  // 更新表单样式
  if (isReadonly) {
    document.getElementById("username").classList.add("readonly");
    document.getElementById("password").classList.add("readonly");
    document.getElementById("gender").classList.add("readonly");
  } else {
    document.getElementById("username").classList.remove("readonly");
    document.getElementById("password").classList.remove("readonly");
    document.getElementById("gender").classList.remove("readonly");
  }
}
</script>

Dalam contoh ini, kami telah menambah dua butang, satu untuk menetapkan elemen borang kepada baca sahaja dan satu lagi untuk membatalkan status baca sahaja. Apabila pengguna mengklik butang ini, fungsi JavaScript yang sepadan dipanggil. Fungsinya adalah untuk mengemas kini status baca sahaja dan gaya elemen borang berdasarkan nilai parameter.

Ringkasan

Dalam artikel ini, kami memperkenalkan menggunakan gaya CSS untuk mengawal status baca sahaja elemen borang HTML. Dengan bantuan atribut "pointer-events" CSS3, kami boleh melaksanakan fungsi ini dengan cepat. Pada masa yang sama, kami juga menunjukkan cara menggunakan JavaScript untuk mengawal keadaan unsur bentuk baca sahaja secara dinamik. Sama ada anda menggunakan CSS atau JavaScript untuk mengawal atribut baca sahaja elemen borang, teknik ini boleh membolehkan anda mencapai kawalan data dan pengalaman pengguna yang lebih baik dalam aplikasi web anda.

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