Apakah maksud input css tidak boleh diedit?

Dalam proses pembangunan bahagian hadapan, elemen input ialah salah satu kawalan borang yang paling biasa digunakan. Dalam beberapa kes khas, kami perlu menyekat pengguna daripada mengubah suai elemen input Pada masa ini, kami biasanya berfikir untuk menetapkan atribut CSS elemen input untuk mencapai keperluan ini, tetapi sebenarnya, ini bukan penyelesaian yang boleh dilaksanakan.

Dalam CSS, memang terdapat beberapa sifat berkaitan yang boleh digunakan untuk mengawal gelagat dan gaya elemen input, seperti atribut disabled dan readonly. Tetapi atribut ini pada dasarnya tidak mengubah suai atribut CSS bagi elemen input, tetapi menukar kaedah interaksi yang dibenarkan untuk mencapai kesan larangan atau baca sahaja.

Kami sering cuba menggunakan sifat CSS untuk mencapai keperluan bahawa input tidak boleh diedit, seperti:

input {
  pointer-events: none;
  user-select: none;
  color: gray;
  background-color: #fafafa;
}

Kod CSS sedemikian kelihatan sangat mudah, tetapi sebenarnya ia tidak sah kerana gaya CSS Nilai dalam elemen input tidak boleh dikawal secara langsung. Tidak kira bagaimana anda menyediakannya, ia boleh diubah suai dalam JavaScript menggunakan atribut value bagi elemen input.

Jadi, mengapa gaya dan nilai elemen input tidak boleh diubah suai terus dalam CSS? Ini berkaitan dengan ciri dan tujuan elemen input.

Pertama sekali, nilai elemen input hendaklah dimasukkan secara bebas oleh pengguna atau diperoleh daripada sumber lain dan pengaturcara tidak seharusnya mengubah suai secara paksa untuk keperluan mereka sendiri. Oleh itu, anda hanya boleh memastikan bahawa nilainya tidak diubah suai dengan menetapkan atribut disabled atau readonly input.

Pada masa yang sama, elemen input diberikan semantik unik dari permulaan reka bentuk. Dalam halaman web, input ialah kawalan yang digunakan untuk mendapatkan data input pengguna Data input akan dihantar ke pelayan latar belakang untuk diproses. Jika pengaturcara boleh mengawal gaya dan nilai input secara langsung, maka beberapa risiko yang tidak dapat diramalkan mungkin berlaku, seperti:

1. Atur cara hasad boleh menggunakan JavaScript atau sambungan penyemak imbas untuk mengganggu nilai input, dengan itu Menyerahkan data yang tidak sesuai atas nama pengguna;
2. Penyerang berniat jahat di tapak web mungkin menggunakan serangan CSS untuk menyembunyikan data input dan menipu maklumat pengguna
3. Kesukaran dalam penyelenggaraan: apabila gaya dan nilai ​​diubah suai pada masa yang sama Tanpa sekatan, mengekalkan elemen input ini akan menjadi sangat sukar.

Oleh itu, pada dasarnya kita tidak boleh mengubah suai secara langsung nilai elemen input. Walau bagaimanapun, dalam beberapa kes yang perlu, kami masih boleh mencapai keadaan input yang tidak boleh diedit melalui kod. Berikut ialah beberapa kaedah pelaksanaan biasa:

1. Gunakan atribut yang dilumpuhkan

Atribut yang dilumpuhkan dimiliki oleh kawalan input itu sendiri tidak boleh diubah suai. Ini kerana kawalan yang tidak tersedia tidak bertindak balas kepada sebarang peristiwa interaksi, termasuk klik dan input papan kekunci. Ini adalah kaedah yang sangat selamat dan mudah dilaksanakan.

<input type="text" id="myInput" disabled>

2. Gunakan atribut baca sahaja

Atribut baca sahaja ialah atribut lain yang dimiliki oleh kawalan input itu sendiri Berbanding dengan dilumpuhkan, baca sahaja hanya menjadikan elemen input menjadi sahaja Membaca status tidak mengubah penampilannya. Ini bermakna anda masih boleh menggunakan CSS untuk mengubah suai gaya elemen input, tetapi anda tidak boleh mengubah suai nilainya. Walau bagaimanapun, sifat ini hanya mempengaruhi pengguna dan nilai masih boleh diubah suai menggunakan JavaScript atau kod hujung belakang.

<input type="text" id="myInput" readonly>

3. Memantau menggunakan JavaScript

Kaedah terakhir ialah menggunakan JavaScript untuk menghalang nilai elemen input daripada diubah suai. Selepas input pengguna, kita boleh menggunakan JavaScript untuk menyimpan nilai input dan melumpuhkan elemen input supaya walaupun pengguna mengklik sekali lagi, elemen input tidak boleh diubah suai.

<input type="text" id="myInput" onkeyup="storeInputValue(this)" >

<script>
  function storeInputValue(input) {
    input.setAttribute('value', input.value);
    input.setAttribute('disabled', 'disabled');
  }
</script>

Dalam kes ini, elemen input menjadi tidak tersedia serta-merta selepas memasukkan nilai dan pengguna tidak boleh mengubah suai nilainya semula. Walau bagaimanapun, perlu diingatkan bahawa ini bukan penyelesaian yang sempurna.

Ringkasan

Melalui pengenalan di atas, kita boleh mengetahui bahawa menggunakan sifat CSS untuk mengawal nilai elemen input supaya tidak boleh diedit adalah tidak sah. Walaupun kita boleh mencapai kesan tidak boleh diedit dengan menetapkan beberapa sifat kawalan input itu sendiri atau menggunakan JavaScript untuk memantau input. Tetapi ini mesti dilakukan dengan berhati-hati, kerana elemen input mempunyai semantik dan fungsi yang sangat penting dari permulaan reka bentuknya, dan kawalan yang berlebihan terhadapnya mungkin mempunyai kesan negatif yang tidak dijangka.

Atas ialah kandungan terperinci Apakah maksud input css tidak boleh diedit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!