Bagaimana untuk membuat input tidak boleh diedit dalam javascript

WBOY
Lepaskan: 2022-04-11 11:41:23
asal
6754 orang telah melayarinya

Kaedah: 1. Gunakan tetapan atribut yang dilumpuhkan, sintaksnya ialah "elemen object.disabled = true"; 2. Gunakan kaedah setAttribute() dan tetapan atribut readOnly, sintaksnya ialah "element object.setAttribute(). "baca Sahaja", benar)".

Bagaimana untuk membuat input tidak boleh diedit dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Cara untuk menetapkan input menjadi tidak boleh diedit dalam JavaScript

Terdapat dua cara untuk menetapkan input menjadi tidak boleh diedit.

1 Gunakan atribut disable

Atribut yang dilumpuhkan ialah atribut Boolean.

Atribut dilumpuhkan menentukan elemen

Elemen input yang dilumpuhkan tidak boleh digunakan dan tidak boleh diklik.

2. Gunakan atribut baca sahaja dan kaedah setAttribute

Atribut baca sahaja menentukan bahawa medan input adalah baca sahaja.

Medan baca sahaja tidak boleh diubah suai. Walau bagaimanapun, pengguna masih boleh tab ke medan dan memilih atau menyalin teksnya.

Atribut baca sahaja menghalang pengguna daripada mengubah suai nilai sehingga syarat tertentu dipenuhi (seperti kotak semak sedang diperiksa). Kemudian, anda perlu menggunakan JavaScript untuk menghapuskan nilai baca sahaja dan menukar medan input kepada keadaan boleh diedit.

Kaedah setAttribute() digunakan untuk menambah atribut baharu dengan nama dan peraturan yang ditentukan, atau menetapkan atribut sedia ada kepada nilai yang ditentukan ialah:

Contohnya adalah seperti berikut:
elementNode.setAttribute(name,value)
Salin selepas log masuk


Hasil keluaran:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>123</title> 
</head>
<body>
<input id="txt" type="text" >
    <input id="btn1" type="button" value="利用disabled不可编辑">
<input id="txt1" type="text" >
    <input id="btn2" type="button" value="利用readOnly不可编辑">
 <script> 
        var btn1 = document.getElementById(&#39;btn1&#39;);
        btn1.onclick = function () {
            var txt = document.getElementById(&#39;txt&#39;);
            txt.disabled = true;
        }
        var btn1 = document.getElementById(&#39;btn2&#39;);
        btn1.onclick = function () {
            var txt = document.getElementById(&#39;txt1&#39;);
            txt.setAttribute("readOnly", true);
        }
    </script>
</body>
</html>
Salin selepas log masuk


 1.gif[Cadangan berkaitan:

tutorial video javascript

bahagian hadapan web

Atas ialah kandungan terperinci Bagaimana untuk membuat input tidak boleh diedit dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan