Readonly, disabled, display, and visible

Css style settings have several attributes with the same functions but slightly different expressions. Today, when you change the style attributes of an object through js, we find that the display and visible attributes seem to be the same, in fact, there are some differences. Here we also share the differences between readonly and disabled.

Differences between display and visible:

(1) display: none and visible: hidden can hide an element on the webpage.

(2) If the elements are directly hidden using display: none in the style file or page file code, after loading the page, the element is not displayed by setting the style in js, using js Code will not be able to correctly obtain some attributes of this element, such as offSetTop and offSetLeft. The returned value will be 0 and the style will be set through js. display to display the elements before obtaining these values correctly.

(3) elements hidden by display: none will not be searched by Baidu or other search sites, which will affect the SEO of the website. In some cases, you can use left:-100000px to achieve the same effect.

(4) If you use a style file or <style> css </style> to set the display: none style of an element, use js to set the style. display = "" Cannot display elements. It can be replaced by block or inline values. This issue does not occur when you directly set the element using style = "display: none.

(5) setting the element to display: none will not reserve the physical space of the hidden object, that is, the object disappears completely on the page. In general, it cannot be seen or touched. Setting the element to visibility: hidden only makes the object invisible on the webpage, but the space occupied by the object on the webpage has not changed. In general, the object is invisible but can be touched.

Difference between Readonly and Disabled:

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

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

(3) If the disabled of an input item is set to true, the input item in the form cannot obtain the focus, and all user operations (such as mouse clicks and keyboard input) this input item is invalid. Readonly only applies to text input items such as text input boxes. If it is set to true, users only cannot edit the corresponding text, but can still focus on it.

(4) Readonly is only valid for input (text/password) and textarea, while disabled is valid for all form elements in html. However, after disabled is used for form elements, after a form is submitted in POST or GET mode, the value of this element is not submitted, but the value of the form Element Set to readonly will still be submitted. Generally, the following situations are commonly used:

(1) A unique recognition code is pre-filled for the user in a form, which cannot be modified by the user. However, this value must be passed during submission. In this case, set its attribute to readonly.

(2) users often need to wait for the Administrator to verify the information after submitting the form. This does not allow users to change the data in the form, but can only view the data, because disabled has a large range of elements, you should use disabled at this time. However, you should also note that the submit button should also be disabled; otherwise, as long as the user presses this button, if no integrity check is performed on the database operation page, the values in the database are cleared. In this case, if we use readonly to replace disabled, we can still use only the input (text/password) and textarea elements in the form. If there are other sending elements, such as select, you can press the Enter key to submit the changes (the default submit trigger button is press Enter ).

(3) After the user presses the submit button, the submit button is disabled by using javascript. This prevents poor network conditions, the user repeatedly clicks the submit button, causing redundant data to be stored in the database.

Articles you may be interested in

• Detailed explanation of the difference between display: inline; and float: left;
• Differences and usage of select into from and insert into select
• Empty, is_null, and isset in php
• Differences between window. navigate and window. location. href
• Use break, continue, goto, return, and exit in multiple loops in PHP
• Php Output Control: understanding the differences between ob_flush and flush
• Differences in the usage of tinyint, smallint, int, and bigint types in mysql
• Differences between php require and include