Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh menentukan bahawa elemen input harus dilumpuhkan?

Bagaimanakah saya boleh menentukan bahawa elemen input harus dilumpuhkan?

PHPzke hadapan: 2023-09-04 10:09:02706semak imbas

Apabila menggunakan borang di halaman web, kadangkala kita perlu melumpuhkan sebarang medan input. Contohnya, menghalang pengguna daripada menggunakan medan input tertentu sehingga mereka melengkapkan langkah sebelumnya dalam borang. Begitu juga, anda juga boleh menghalang pengguna daripada menyerahkan data tidak sah atau palsu dengan melumpuhkan medan borang sehingga semua medan yang diperlukan diisi.

Untuk menyelesaikan masalah di atas, kami mempunyai kaedah berbeza yang boleh digunakan untuk melumpuhkan elemen input dalam HTML, seperti menggunakan atribut "dilumpuhkan", JavaScript dan CSS. Dalam artikel ini kita akan melihat cara untuk menentukan bahawa elemen input harus dilumpuhkan.

Sama ada anda seorang pembangun yang baru mula mempelajari pembangunan web atau pembangun berpengalaman yang ingin menyegarkan pengetahuan anda, artikel ini akan memberikan anda maklumat yang anda perlukan untuk melumpuhkan elemen input pada halaman web anda dengan berkesan.

Cara berbeza untuk melumpuhkan elemen input

Kaedah 1: Gunakan atribut "dilumpuhkan"

Cara pertama untuk melumpuhkan elemen input HTML, atau kita boleh katakan cara paling mudah, ialah menggunakan atribut "dilumpuhkan" yang tersedia dalam elemen . Atribut ini boleh ditambah pada mana-mana elemen input dan akan menghalang pengguna daripada berinteraksi dengan elemen tersebut.

Apabila elemen input dilumpuhkan, ia tidak boleh diedit, dipilih atau diserahkan sebagai sebahagian daripada borang. Atribut ini biasanya digunakan untuk menunjukkan kepada pengguna bahawa input tidak tersedia, atau untuk menghalang pengguna daripada menyerahkan data tidak sah.

Tatabahasa

Berikut ialah sintaks untuk melumpuhkan elemen input menggunakan atributnya yang dilumpuhkan, sila gunakan kod berikut:

<input type="number" name="phone" disabled>

Dalam kod di atas, kami mempunyai medan input nombor jenis, yang boleh dilumpuhkan menggunakan atribut "dilumpuhkan" elemen dalam HTML.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, elemen input bernama "telefon" dilumpuhkan menggunakan atribut yang tersedia dalam elemen . Atribut "dilumpuhkan" melumpuhkan elemen input.

<html>
   <head>
      <title>Example to disable the input element using disabled attribute method </title>
   </head>
   <body>
      <h2>Welcome to Tutorialspoint</h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone" disabled>
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>

Kaedah 2: Menggunakan JavaScript

Cara kedua untuk melumpuhkan elemen input HTML ialah menggunakan JavaScript. Pendekatan ini berguna apabila anda perlu melumpuhkan elemen secara dinamik berdasarkan input pengguna atau faktor lain.

Satu kelebihan menggunakan pendekatan JavaScript ialah ia membolehkan kami menambah atau mengalih keluar atribut "dilumpuhkan" secara dinamik berdasarkan input pengguna atau syarat lain, kerana ia sangat berguna apabila elemen input perlu dilumpuhkan berdasarkan tindakan pengguna atau lain-lain faktor.

Kaedah ini melibatkan penggunaan kod JavaScript untuk mengakses elemen input dan menetapkan atribut "dilumpuhkan" kepada benar Sintaks untuk menggunakan kaedah ini adalah seperti berikut.

Tatabahasa

Berikut ialah sintaks untuk melumpuhkan elemen input menggunakan JavaScript, gunakan kod berikut:

document.getElementById("disabledInputField").disabled = true;

Dalam kod di atas, kami mempunyai kod JavaScript dengan ID elemen input ialah "disabledInputField" dan atribut "disabled" ditetapkan kepada benar. Kini, sebarang elemen input dengan ID ditetapkan kepada "disabledInputField" akan dilumpuhkan, tidak membenarkan pengguna mengaksesnya.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, JavaScript digunakan untuk melumpuhkan elemen input yang id dan nama kedua-duanya adalah "nama". Untuk melumpuhkan elemen input, kami mempunyai butang yang dipanggil "Serah" dan apabila butang diklik fungsi yang dipanggil "disablename()" dipanggil dan atribut "disabled" elemen input "name" ditetapkan kepada benar.

<html>
   <head>
      <title>Example to disable the input element using JavaScript method</title>
      <script>
         function disableName() {
            document.getElementById("name").disabled = true;
         }
      </script>
   </head>
   <body>
      <h2> Welcome to Tutorialspoint </h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone">
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>

Kaedah 3: Gunakan CSS

Dalam kaedah ini kami akan menggunakan CSS untuk melumpuhkan elemen input. Kaedah CSS melumpuhkan elemen input melibatkan penggunaan kod CSS untuk menggayakan elemen input yang dilumpuhkan untuk menunjukkan dengan jelas kepada pengguna bahawa mereka tidak boleh berinteraksi dengannya.

Tatabahasa

Di bawah ialah sintaks untuk melumpuhkan elemen input menggunakan CSS, sila gunakan kod berikut -

input[disabled] {
   opacity: 0.8;
   pointer-events: none;
}

Dalam kod di atas, kami mempunyai kod CSS di mana elemen input telah melumpuhkan atribut ditetapkan kepada benar. Di sini, untuk melumpuhkan elemen input, kami menetapkan kelegapan kepada 0.8 dan acara penunjuk kepada tiada kerana kedua-dua sifat CSS akan menjadikan elemen input dilumpuhkan dan akhirnya tidak membenarkan pengguna mengaksesnya.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam contoh ini, elemen input dengan id dan nama "telefon" dilumpuhkan menggunakan CSS. Untuk melumpuhkan elemen input, kami menggunakan kod CSS untuk menetapkan kelegapan mana-mana elemen input dengan atribut "dilumpuhkan" kepada 0.8 dan atribut "penunjuk-acara" kepada "tiada". Semua sifat CSS ini menjadikan elemen input dilumpuhkan.

<!DOCTYPE html>
<html>
   <head>
      <title>Example to disable the input element using CSS method</title>
      <style>
         input[disabled] {
            opacity: 0.8;
            pointer-events: none;
         }
      </style>
   </head>
   <body>
      <h2> Welcome to Tutorialspoint </h2>
      <form>
         <label for="name">Enter your name:</label>
         <input type="text" id="name" name="name">
         <br>
         <label for="phone">Enter your phone number:</label>
         <input type="text" id="phone" name="phone" disabled>
         <br>
         <label for="user">Enter your username:</label>
         <input type="text" id="user" name="user">
         <br>
         <label for="password">Enter your password:</label>
         <input type="password" id="password" name="password">
         <br>
         <input type="add" value="Submit">
      </form>
   </body>
</html>

Kesimpulan

Dalam artikel ini kami melihat cara untuk melumpuhkan elemen input dan kaedah yang berbeza menggunakan atribut "dilumpuhkan", JavaScript dan CSS. Antara ketiga-tiga kaedah ini, atribut "dilumpuhkan" digunakan pada elemen dan menghalang pengguna daripada menggunakan elemen input. Kami juga memperincikan cara untuk melumpuhkan menggunakan JavaScript dan CSS. Setiap kaedah mempunyai kebaikan dan keburukan, bergantung kepada keperluan projek.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menentukan bahawa elemen input harus dilumpuhkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Pemilih kad liar (*, ^ dan $) dalam CSS untuk kelasArtikel seterusnya：Pemilih kad liar (*, ^ dan $) dalam CSS untuk kelas

Artikel berkaitan

Lihat lagi