Di JavaScript, ada halaman web yang mengharuskan Anda memasukkan data sensitif, yang tidak boleh diubah setelah dimasukkan atau saat mengirimkan formulir. Misalnya, mengatur izin file agar dapat dibaca atau tidak. Dalam kasus seperti itu, menambahkan dan menghapus atribut readonly di JavaScript sangat efektif dalam menangani file dan memastikan persyaratan keamanan secara keseluruhan. Tulisan ini akan membahas metode untuk menambah dan menghapus atribut readonly di JavaScript. Bagaimana cara Menambah dan Menghapus Atribut readonly di JavaScript? Untuk menambah dan menghapus atribut readonly di JavaScript, terapkan metode “setAttribute()” dan “removeAttribute()”.

Metode "setAttribute()" memberikan nilai ke atribut, dan metode "removeAttribute()" menghapus atribut dari elemen yang ditentukan. Metode ini dapat dikaitkan dengan peristiwa "klik" untuk menyetel nilai yang ditentukan sebagai "hanya baca" dan membatasi penghapusannya.

Syntax

element.setAttribute(name, value)

element.removeAttribute(name)

Dalam sintaks di atas, "nama" mengacu pada nama atribut, dan "nilai" adalah nilai baru yang akan diberikan

Di sini, "nama" mengacu pada nama atribut tertentu. Pergi melalui contoh berikut untuk demonstrasi. Contoh Pertama, sertakan dua tombol dengan id "addAttribute" dan "removeAttribute". Tombol-tombol ini akan digunakan untuk menambah dan menghapus atribut readonly. Juga, sertakan id masukan sebagai "teks" untuk memasukkan data teks:

Add Attribute
Remove Attribute

Dalam file JavaScript, gunakan "document.querySelector()" untuk mengambil elemen HTML yang ditambahkan dengan bantuan id yang ditentukan:

var addButton= document.querySelector('#addAttribute');
var removeButton= document.querySelector('#removeAttribute');
var get= document.querySelector('input');

Setelah itu, terapkan metode “addEventListener()” untuk melampirkan penangan kejadian klik dengan metode setAttribute(). Ini akan bekerja sedemikian rupa sehingga ketika tombol "Tambahkan Atribut" diklik, nilai kolom input akan ditetapkan sebagai "hanya baca":

addButton.addEventListener('click', () => {
get.setAttribute('readonly', true);
});

Demikian pula, ulangi prosedur yang sama untuk menghapus atribut set dengan menyertakan event click secara terpisah dan menerapkan metode removeAttribute() :

removeButton.addEventListener('click', () => {
get.removeAttribute('readonly');
});

Untuk tujuan pengujian, pertama-tama kita akan memasukkan nilai di kolom input dan klik tombol Add Attribute. Akibatnya, atribut nilai tambah akan ditetapkan sebagai hanya-baca. Kemudian, klik tombol Hapus Atribut. Anda mungkin memperhatikan bahwa nilainya akan tetap ada (tidak dihapus).

Kesimpulan
Untuk menambah dan menghapus atribut readonly di JavaScript, metode "setAttribute()" dan "removeAttribute()" dapat digunakan untuk menambahkan dan menghapus atribut readonly masing-masing dengan mengambil id tombol yang sesuai, termasuk event handler dan tipe input dengan masing-masing dari metode yang diterapkan. Blog ini menjelaskan metode untuk menambah dan menghapus atribut readonly di JavaScript.