hujung hadapan web
tutorial css
Bagaimanakah saya boleh menentukan bahawa elemen input harus dilumpuhkan?
Bagaimanakah saya boleh menentukan bahawa elemen input harus dilumpuhkan?
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 bagiContoh
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 id="Welcome-to-Tutorialspoint">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 bagiContoh
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 id="Welcome-to-Tutorialspoint"> 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 bagiContoh
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 id="Welcome-to-Tutorialspoint"> 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
