css menjadikan input tidak boleh diedit

Semasa proses pembangunan bahagian hadapan, kadangkala anda menghadapi situasi di mana anda perlu menetapkan teg input supaya tidak boleh diedit. Keadaan ini boleh dicapai melalui CSS. Seterusnya, kami akan menerangkan secara terperinci cara menggunakan CSS untuk menjadikan input tidak boleh diedit.

1. Lumpuhkan elemen input

Cara paling biasa untuk melumpuhkan elemen input ialah menggunakan atribut "dilumpuhkan". Menetapkan sifat "dilumpuhkan" kepada "benar" melumpuhkan kotak input dan menjadikannya kelabu. Dengan cara ini pengguna tidak boleh mengedit atau memasukkan apa-apa ke dalam kotak input.

Sebagai contoh, kita boleh menulis kod seperti ini:

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

2. Gunakan CSS untuk melumpuhkan elemen input

Jika anda tidak menggunakan atribut "disabled", kami juga boleh melumpuhkan input melalui kotak CSS. Pertama, kita boleh menggunakan sifat "pointer-events" CSS untuk menetapkan kotak input menjadi tidak interaktif. Dengan cara ini pengguna tidak boleh menaip dalam kotak input atau menggunakan kursor untuk bergerak.

Contohnya:

input{
  pointer-events:none;
}

Walau bagaimanapun, kaedah ini tidak dapat mencapai sepenuhnya kesan menjadikan kotak input tidak boleh diedit. Pengguna masih boleh memasukkan teks atau mengubah suai teks dalam kotak input dengan memotong, menyalin, menampal, dsb., kerana kotak input masih boleh mendapat fokus dalam kes ini. Untuk mengelakkan ini, kita perlu menggunakan CSS yang lebih ketat.

Kami boleh menggunakan atribut "pilihan pengguna" untuk menghalang pengguna daripada memilih teks di dalam elemen. Dengan cara ini, pengguna tidak boleh memilih atau mengubah suai teks dalam kotak input.

Contohnya:

input{
  pointer-events: none;
  user-select: none;
}

Pada masa ini, kami akan mendapati bahawa kotak input telah menjadi tidak boleh diedit sepenuhnya. Pengguna tidak boleh memasukkan atau mengubah suai sebarang kandungan. Jika kami ingin mengalih keluar keadaan ini, kami perlu memadamkan atribut ini dalam CSS atau menambah atribut ini secara manual menggunakan kod JavaScript.

3. Ringkasan

Melalui penjelasan di atas, kita dapat melihat bahawa kesan menjadikan kotak input tidak boleh diedit boleh dicapai dengan menggunakan CSS. Satu cara ialah menggunakan atribut "dilumpuhkan" untuk melumpuhkan kotak input, dan cara lain ialah menggunakan atribut "peristiwa penunjuk" dan "pilihan pengguna" untuk menetapkan kotak input menjadi tidak interaktif dan tidak boleh dipilih . Kaedah ini boleh membantu kami memenuhi keperluan yang berbeza dan meningkatkan kecekapan semasa proses pembangunan.

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