Does The Web Browser Retain Or Remove Manually And Programmatically Entered/Displayed Web Page Content Upon F5 (Refresh/Reload)?
1. Introduction
A test to determine if the web browser retains or removes manually and programmatically entered/displayed web page content upon F5 (Refresh/Reload).
IE and FF retain manually and programmatically entered web page form element content upon F5 (Refresh/Reload). SF, CH, and OP remove manually and programmatically entered web page form element content upon F5 (Refresh/Reload). With respect to retaining/removing manually and programmatically entered web page form element content upon F5 (Refresh/Reload), in some cases ED behaves like IE and FF, and in other cases ED behaves like SF, CH, and OP. All of the aforementioned web browsers remove programmatically displayed web page non-form element content upon F5 (Refresh/Reload). Because IE and FF retain manually and programmatically entered form element content, but remove programmatically displayed non-form element content upon F5 (Refresh/Reload), the state of manually and programmatically entered form element content can fall out of sync with the state of programmatically displayed non-form element content.
For example, suppose a web page with a checkbox in which checking the checkbox triggers an event handler that programmatically displays some non-form element text. In IE and FF, after checking the checkbox, if the user then pressed F5 (Refresh/Reload), the checkbox would remain checked:, but the programmatically displayed non-form element text would be removed, which throws the state of the checkbox and the programmatically displayed non-form element text out of sync, as demonstrated:
- View this web page in IE or FF.
- Press F5 or click Refresh/Reload.
In IE and FF, upon F5 (Refresh/Reload), the checkboxes on line 2 and 3 above remain checked, but the programmatically displayed text on line 4 above is removed. Line 3 states to check its checkbox to display some text on line 4. In IE and FF, however, notice that the checkbox on line 3 is currently checked, but that line 4 is empty, which is contrary to what line 3 implies. Because IE and FF retain manually and programmatically entered form element content, but remove programmatically displayed non-form element content upon F5 (Refresh/Reload), the state of the checkbox and the programmatically displayed text are now out of sync. The checkbox on line 2 above is a dummy checkbox that does nothing and is not connected to the programmatically displayed text in line 4. It simply serves as a control to confirm that the state of the line 3 checkbox is independent of the line 3 checkbox triggering an event handler.
To complete the tests below:
- Section 2: Click the button to perform the programmatic actions.
- Sections 3 - 8: This is the manually and programmatically entered web page form element content tests. Manually enter text, check/uncheck, and select/unselect as indicated.
- Section 9: This is the programmatically displayed web page non-form element content tests. Nothing to do here. Skip to the next step.
- Section 10: Press F5 or click Refresh/Reload.
- Notice where the web browser retains or removes the manually and programmatically entered/displayed web page content.
1.1. Abbreviations
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- FF = Firefox.
- SF = Safari.
- CH = Chrome.
- OP = Opera.
2. Click To Complete The Programmatic Items Below
3. Textbox Text
3.1. Manually Entered Textbox Text
3.1.1. Manually Entered Textbox Text Result
Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
3.2. Programmatically Entered Textbox Text
3.2.1. Programmatically Entered Textbox Text Result
Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
4. Textarea Text
4.1. Manually Entered Textarea Text
4.1.1. Manually Entered Textarea Text Result
Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
4.2. Programmatically Entered Textarea Text
4.2.1. Programmatically Entered Textarea Text Result
Text retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Text removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
5. Checkbox Unchecked To Checked
5.1. Manually Checked Checkbox
5.1.1. Manually Checked Checkbox Result
Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.
Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.
5.2. Programmatically Checked Checkbox
5.2.1. Programmatically Checked Checkbox Result
Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.
Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.
6. Checkbox Checked To Unchecked
6.1. Manually Unchecked Checkbox
6.1.1. Manually Unchecked Checkbox Result
Uncheck retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Uncheck removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
6.2. Programmatically Unchecked Checkbox
6.2.1. Programmatically Unchecked Checkbox Result
Uncheck retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Uncheck removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
7. Radio Button Group
7.1. Manually Checked Radio Button
Manually check radio button two:
7.1.1. Manually Checked Radio Button Result
Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.
Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.
7.2. Programmatically Checked Radio Button
Programmatically checked radio button two:
7.2.1. Programmatically Checked Radio Button Result
Check retained upon F5 (Refresh/Reload): IE6+, FF1.5+.
Check removed upon F5 (Refresh/Reload): ED12+, SF3.1+, CH2+, OP7.50+.
8. Selectbox
8.1. Manually Selected Selectbox
8.1.1. Manually Selected Selectbox Result
Selection retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Selection removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
8.2. Programmatically Selected Selectbox
8.2.1. Programmatically Selected Selectbox Result
Selection retained upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+.
Selection removed upon F5 (Refresh/Reload): SF3.1+, CH2+, OP7.50+.
9. Programmatically Displayed Web Page Text
9.1. Programmatically Displayed Web Page Text Via JavaScript innerHTML
Property
Programmatically displayed web page text Via JavaScript innerHTML
Property between the following square braces: [ ].
9.1.1. Programmatically Displayed Web Page Text Via JavaScript innerHTML
Property Result
innerHTML
property is IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.Text retained upon F5 (Refresh/Reload): none.
Text removed upon F5 (Refresh/Reload): IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.
9.2. Programmatically Displayed Web Page Text Via JavaScript classList
Property
Programmatically displayed web page text Via JavaScript classList
Property between the following square braces: [ Via JavaScript classList
Property ].
9.2.1. Programmatically Displayed Web Page Text Via JavaScript classList
Property Result
classList
property is IE10+, ED12+, FF3.6+, SF5.1+, CH8+, OP11.50+.Text retained upon F5 (Refresh/Reload): none.
Text removed upon F5 (Refresh/Reload): IE10+, ED12+, FF3.6+, SF5.1+, CH8+, OP11.50+.
10. Press F5 Or Click Refresh/Reload
Press F5 or click Refresh/Reload.