如何使用“value”属性在只读和输入模式之间切换<input>元素

Question

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> ?

Answer 1

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.

Answer 2

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); 
   }
}