Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat input tidak boleh diedit dalam javascript

Bagaimana untuk membuat input tidak boleh diedit dalam javascript

WBOY
WBOYasal
2022-04-11 11:41:236730semak imbas

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 d5fd7aea971a85678ba271703566ebfd

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)


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>


 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!

Kenyataan:
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