How to process a form and make text boxes such as input read-only and non-editable

Method 1: onfocus=this.blur()

Method 2: readonly

Method 3: disabled

Both Readonly and Disabled can prevent users from changing the content in the form field. But there are slight differences between them, which are summarized as follows:
Readonly is only valid for input (text/password) and textarea, while disabled is valid for all form elements, but after the form element uses disabled, when we use If the form is submitted by POST or GET, the value of this element will not be passed out, but readonly will pass the value out (readonly accepts value changes and can return them, disable accepts changes but does not return data).
Generally common situations are:
A unique identification code is pre-filled in a form for the user, and the user is not allowed to change it, but the value needs to be passed when submitting. At this time, its attributes should be Set to readonly.
It is often encountered that when a user formally submits a form and needs to wait for information verification by the administrator, the user is not allowed to change the data in the form, but can only view it. Since disabled has a large range of elements, so at this time Disabled should be used, but at the same time it should be noted that the submit button should also be disabled, otherwise as long as the user presses this button, if there is no integrity check in the database operation page, the values in the database will be cleared. If readonly is used instead of disabled in this case, it is still possible if there are only input (text/password) and textarea elements in the form. If there are other elements, such as select, the user can rewrite the value and press Press the Enter key to submit (Enter is the default submit trigger button)
We often use JavaScript to disable the submit button after the user presses the submit button. This can prevent users from repeatedly clicking in an environment with poor network conditions. Submit buttons cause data to be redundantly stored in the database.
The two attributes disabled and readonly have something in common. For example, if both are set to true, the form attribute cannot be edited. It is often easy to mix these two attributes when writing js code. In fact, there is a difference between them. There is a certain difference:
If the disabled of an input item is set to true, the form input item cannot obtain focus, and all user operations (mouse clicks and keyboard input, etc.) are invalid for the input item. The most important point is When the form is submitted, this form input will not be submitted.
Readonly is only for input items such as text input boxes that can input text. If set to true, the user just cannot edit the corresponding text, but can still focus, and when submitting the form, the input item will be used as A submission of the form.

Some performance issues:
The difference between display: none and visibility:hidden is that visibility:hidden will retain the space of the element
repaint (redraw), repaint When a change occurs, the appearance of the element is changed, and it occurs without changing the layout. For example, changing the outline, visibility, and background color will not affect the rendering of the DOM structure.
reflow (rendering), the difference from repaint is that it will affect the rendering of the dom structure, and at the same time it will trigger repaint, it will change itself and all parent elements (ancestors), this overhead is very expensive, resulting in performance The decline is inevitable, and the more page elements there are, the more obvious the effect will be.
So display:none will generate reflow
visibility:hidden will only trigger repaint

Related articles:

js sets the input text box read-only

Set all form objects as read-only through js

Use js to dynamically control the read-only attribute of the input box

The above is the detailed content of How to process a form and make text boxes such as input read-only and non-editable. For more information, please follow other related articles on the PHP Chinese website!