WEB front end beginner's notes (16) -- form events

1, Form event

1. Common events

In JavaScript, there are three common form events.

  • (1) onfocus and onblur
  • (2)onselect
  • (3)onchange

2.onfocus and onblur

onfocus indicates the event triggered when the focus is obtained, while onblur indicates the event triggered when the focus is lost. The two operations are opposite.

Onfocus and onblur are often used together. For example, when the user is ready to enter content in the text box, it will get the cursor and trigger the onfocus event. When the text box loses the cursor, the onblur event is triggered.

Not all HTML elements have focus events. There are only two elements with the characteristics of "getting focus" and "losing focus".

  • (1) Form elements (radio box, check box, single line text box, multi line text box, drop-down list)
  • (2) Hyperlinks

It's easy to judge whether an element has focus. After we open a page and press Tab, we can select the element with focus. In actual development, focus events (onfocus and onblur) are generally used for single line text boxes and multi line text boxes, which are rarely used in other places.

Such as search box:

 1 <!DOCTYPE html> 
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style type="text/css">
 7         #search{color:#bbbbbb;}
 8     </style>
 9     <script>
10         window.onload = function () 
11         {
12             //Get element object
13             var oSearch = document.getElementById("search");
14             //Get focus
15             oSearch.onfocus = function () 
16             {
17                 if (this.value == "Baidu once, you know") 
18                 {
19                     this.value = "";
20                 }
21             };
22             //Lose focus
23             oSearch.onblur = function () 
24             {
25                 if (this.value == "") 
26                 {
27                     this.value = "Baidu once, you know"; 
28                 }
29             };
30         }
31     </script>
32 </head>
33 <body>
34     <input id="search" type="text" value="Baidu once, you know"/>
35     <input type="button" value="search" />
36 </body>
37 </html>

3.onselect

In JavaScript, when we select the content in "single line text box" or "multi line text box", the onselect event will be triggered.

as

 1 <!DOCTYPE html> 
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script>
 7         window.onload = function () 
 8         {
 9             var oTxt1 = document.getElementById("txt1");
10             var oTxt2 = document.getElementById("txt2");
11             oTxt1.onselect = function () 
12             {
13                 alert("You selected the content in the single line text box");
14             };
15             oTxt2.onselect = function () 
16             {
17                 alert("You have selected the contents of the multiline text box");
18             };
19         }
20     </script>
21 </head>
22 <body>
23     <input id="txt1" type="text" value="If I really exist, it's also because you need me."/><br />
24     <textarea id="txt2" cols="20" rows="5">If I really exist, it's also because you need me.</textarea>
25 </body>
26 </html>

3, onchange

In JavaScript, the onchange event is often used for "form elements with multiple options".

  • (1) Triggered when an item is selected in the radio box.
  • (2) Triggered when an item is selected in the check box.
  • (3) Triggered when an item is selected from the drop-down list.

When we select an item in the drop-down list, the onchange event will be triggered, and then the corresponding page will be opened in a new window. The effect of drop-down menu is quite common. We can learn about it.

For the select element, we can use obj.options[n] to get a list item, which is also a DOM object. You can also use obj.selectedIndex to get the subscript of the list item you selected. Both are unique and frequently used methods for drop-down lists.

In addition, window.open() means to open a new window, which will be described in detail in the section "13.2 window operation".

One thing to remind you: when you select an item in the drop-down list, the onchange event is triggered, not the onselect event. The onselect event is triggered only when the content in the text box is selected. We need to know the difference between the two.

 

Posted on Sun, 05 Dec 2021 13:28:11 -0500 by dpearcepng