How to disable input box and textarea editing
When we are developing projects, sometimes we don’t want users to operate on our page, especially input boxes, etc. At this time, we need to set it up.
The first method
<input type="text" v-model="" style="width: 100%;outline: none;height: 100%" readonly> <textarea v-model="" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" readonly></textarea>
Key points:
We use readonly. The advantage of using this method is that there is no gray background color after the input box is prohibited
The second method
<input type="text" v-model="" style="width: 100%;outline: none;height: 100%" disabled> <textarea v-model="" style="width: 100%;border: none;outline: none;resize:none;overflow:hidden" disabled></textarea>
Key points:
We use disabled. The advantage of using this method is that when the input box is disabled, there will be a gray background color.
Depending on the project's needs, the methods used for different needs are different.
expand:
- Disable text field dragging:
resize:none - Scroll bars are prohibited:
overflow:hidden
Tell me why input cannot be entered
No initial value v-model is set
Need to use when binding values in dynamic loop
@input=“change()” change(){this.$forceUpdate()} Force update view
The above is personal experience. I hope you can give you a reference and I hope you can support me more.