Small knowledge, big challenge! This article is participating in the creation activity of “Essentials for Programmers”. This article has participated in the “Digitalstar Project” to win the creation gift package and challenge the creation incentive money.
Hi, I’m Ken
Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).
This blog is suitable for just contactJSAnd the friends who want to review after a long time.
🌊🌈
The following is part 7 of this column series, under THE DOM
7.9_ Keyboard Events
7.9.1_ Common methods for keyboard events
Keyboard events refer to the events triggered by the user when using the keyboard. For example, press Esc to close the status bar and press Enter to switch the cursor up and down.
Keyboard events:
| The name of the event | Event trigger timing |
|---|---|
| keypress | Triggered when a keyboard key is pressed. Do not recognize function keys, such as Ctrl, Shift, arrow, etc |
| keydown | Triggered when a keyboard key is pressed |
| keyup | Triggered when a keyboard key is released |
Note that the keypress event stores the ASCII key, while the KeyDown and KeyUP events store the virtual key. If you hold down keyDown and KeyPress, the corresponding event will be triggered repeatedly. Keyup and KeyDown events are case insensitive, while KeyPress is case sensitive.
When keyDown and KeyPress events occur, the KeyCode property of the Event event object contains a value that corresponds to a specific value on the keyboard. The value of keycode is the same as that of the ASCII code. For example, a keycode value of 13 indicates the Enter key, and a keycode value of 9 indicates the Tab key. Readers can refer to MDN and other manuals for viewing, not listed in detail here.
7.9.2_ Keyboard event object
Keyboard events also have a corresponding KeyBoardEvent object, KeyBoardEvent, which is a collection of information related to keyboard events. Based on the keyCode attribute in the keyboard event object, the corresponding ASCII code value can be obtained to determine which key the user pressed.
Case: check if the user presses the S key, if so, position the cursor inside the search box,
<body>
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup'.function (e) {
if (e.keyCode == 83) { search.focus (); }});</script>
</body>
Copy the codeIn the above code, line 5 binds the mouse up event, which will be detected when the input is complete. Lines 6 through 8 use keyCode in the keyboard event object to determine whether the user pressed the S key, and if so, let the search box take focus to help the user type.
7.9.3_[Case] Text box Information
In real life, we often use the express tracking number query function to check the logistics information status of goods. Sometimes, when a user enters a single number, the website will display a prompt bar at the top of the text box to make the user see the input clearly, and enlarge the number entered by the user.
Example: When the user enters the content in the text box, the text box will automatically display the content in large words. If the user enters blank, hide the large-size text. The specific implementation steps of this case are as follows:
(1) Write HTML code to complete the page layout.
<body>
<div class="search">
<div class="con"></div>
<label>Tracking Number:<input type="text" placeholder="Please enter your tracking number." class="num">
</label>
</div>
</body>
Copy the codeLine 3 defines a div element with the class name con to display the large text that the user typed. The < input> tag on line 5 is used to display user input.
(2) Detect user input and add keyboard events to the form. The sample code is as follows.
<script>
var con = document.querySelector('.con');
var numInput = document.queryselector('.num');
numInput.addEventListener('keyup'.function () {
if (this.value == ' ' ) {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerText = this.value; }}); </script>Copy the codeIn the above code, lines 2 and 3 get the con and NUM_INPUT objects. The fourth line of code adds a keyUP event to the numInput form object and, after the user has entered, checks the content. If the input is empty, hide the CON element; otherwise, display the CON element. At the same time, get the value from the express order number and assign it to the innerText of the con box as the content.
(3) Lose focus and hide the con element.
After line 11 of step (2), write the following code to make the text box lose focus and hide the con element.
num_input.addEventListener('blur'.function() {
con.style.display = 'none';
});
Copy the code(4) Get the focus and display the CON element.
After step (3), write the following code to get the focus of the text box and display the con element.
num input.addEventListener('focus'.function ) {
con.style.display = 'block';
});
Copy the codeOnce you’re done with the code, access the test through your browser.
🌊🌈
HTML Getting Started Guide learning Column “Finished” :
A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms Ken’s introduction to HTML and CSS (16) _ Multimedia Technology (17) _ Multimedia technology challenge the minimum time to bring you into HTML (18) challenge the minimum time to bring you into HTML (20)
Javascript Getting Started Guide Learning Column “In update” :
Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (17) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (18) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (19) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (20) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (21) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (22) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (23)
🌊🌈 About postscript:
Thank you to meet hello I am Ken personal wechat: WLPChaojiBang Have questions please feel free to communicate with me, a person can go fast, but a group of people can go farther! “Attention” : improve learning efficiency! 👍🏻 : original is not easy, appropriate encouragement! ⭐ : Collect articles, review the old and learn the new! 💬 : Comment exchange, common progress!