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>?
2 Answers
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.
Comments
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);
}
}
readonlyorreadonly={true}to the inputs?