Detailed explanation of the differences between readonly, disabled, display and visible

This article mainly introduces the detailed explanation of the differences between readonly, disabled, display, and visible. There are several attributes in css style settings that have the same function but slightly different forms of expression. Today when I changed the style attributes of the object through js, I found that display and visible seem to be the same, but in fact there are some differences. By the way, here Also share the difference between readonly and disabled that you see.

The difference between display and visible:

(1) The first thing to explain is that both display:none and visible:hidden can hide an element on the web page.

(2) If you directly use display:none to hide the element in the style file or page file code, after loading the page, use js code without setting the style through js to display the element. Some attributes of the element will not be correctly obtained, such as offSetTop, offSetLeft, etc., and the returned value will be 0. These values ​​can only be obtained correctly after setting style.display in js to display the element.

(3) Elements hidden using display:none will not be retrieved by search sites such as Baidu, which will affect the SEO of the website. In some cases, left:-100000px can be used to achieve the same effect.

(4) If the display:none style of an element is set through a style file or , setting style.display="" with js will not cause the element to be displayed. You can Use values ​​such as block or inline instead. Settings directly on the element via style="display:none" will not have this problem.

(5) Setting the element to display:none will not reserve its physical space for the hidden object, that is, the object will completely disappear on the page. In layman's terms, it cannot be seen or touched. Setting the element to visibility:hidden only makes the object invisible on the web page, but the space occupied by the object on the web page does not change. In layman's terms, it is invisible but touchable.

The difference between Readonly and Disabled:

(1) Both Readonly and Disabled can prevent users from changing the content in the form field.

(2) When both the disabled and readonly attributes are set to true, the form attribute cannot be edited.

(3) 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. 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.

(4) Readonly is only valid for input (text/password) and textarea, while disabled is valid for all form elements in html. However, after the form element uses disabled, when we POST the form After submitting via GET or GET, the value of this element will not be submitted, but the value of the form element set to readonly will still be submitted. The more commonly used situations are:

(1) A unique identification code is pre-filled for the user in a form, and the user is not allowed to change it, but the value needs to be passed when submitting. At this time, it should be Its attribute is set to readonly.

(2) It is often encountered that when a user formally submits a form, he or she needs to wait for information verification by the administrator. This does not allow the user to change the data in the form, but can only view it. Due to the disabled element, the user is not allowed to change the data in the form. The range is large, so disabled should be used at this time, 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 value in the database will be 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 key).

(3) We often use javascript to disable the submit button after the user presses the submit button. This can prevent the user from repeatedly clicking the submit button in an environment with poor network conditions, resulting in redundant data storage. database.

The above content is a detailed explanation of the differences between readonly, disabled, display, and visible. I hope it will be helpful to everyone.

Related recommendations:

Detailed explanation of the subtle differences between Readonly and Disabled

A brief discussion of the input read-only attributes readonly and disable in HTML The difference

Detailed explanation of the difference between the display and visibility attributes in div

The above is the detailed content of Detailed explanation of the differences between readonly, disabled, display and visible. For more information, please follow other related articles on the PHP Chinese website!