CODEWITHSUNDEEP
javascripthtmlreactjstypescript
Samuel Nihoul
Samuel Nihoul

Reputation: 68

How to alternate between read-only and input mode in <input> html tags?

I am trying to make a webpage full of <input> tags, where one can switch between edit and read-only modes. How can I do that easily, my guess being using the value attribute of <input>?

Upvotes: 0

Views: 320

Answers (2)

Thanasis Balatsoykas
Thanasis Balatsoykas

Reputation: 176

Here is a small example of how you can create a class that will automatically generate inputs and update them to readonly whenever you want. (on the fiddle there is a working example of it). Just connect a button to update the input to

Εdit: this solution is best suited for use in vanilla js

https://jsfiddle.net/0hvjr2uL/25/

class Inp {

    constructor(name, value, placeholder, id, readOnly = false) {
        this.name = name;
        this.value = value;
        this.placeholder = placeholder;
        this.id = id;
        this.readOnly = readOnly;
   }

   render(root){
       let input = document.createElement("input");
       input.name = this.name;
       input.value = this.value
       input.id = this.id;
       input.setAttribute("readonly", this.readOnly); 
    
       root.appendChild(input);
   }

   update() {
       let input = document.getElementById(this.id);
       input.setAttribute("readonly", this.readOnly); 
   }
}

Upvotes: 0

maya_nk99
maya_nk99

Reputation: 502

You can create a state variable isEditMode=true and create a button that changes the state values to true or false. Now you can use this variable and pass it's value as disabled attribute like this:-

<input disabled={!isEditMode}/>

So if it not in edit mode then input will be disabled or we can say in view mode.

Upvotes: 1

Related Questions