Day12 - Validation Guide for Keyboard Input Sequences

Keywords: Javascript github Spring

Author: liyuechun
Introduction: JavaScript30 yes Wes Bos A 30-day challenge to launch. The project provides 30 video tutorials, 30 challenge start documents and 30 challenge solution source code free of charge. The goal is to help people write in pure JavaScript, without using frameworks and libraries or compilers and references. Now you see the 12th in this series. The complete Chinese version of the guide and video tutorial in From Zero to Yiquantan Tribe.

Project effectiveness

A script tag is provided in the document for us to follow. Cornify.com When a JS file is loaded and the cornify_add() method is called, a p tag is appended to the page and an icon is inserted into the DOM. The concrete effect of Cornify is shown above.

Solutions

Specifies a string that can trigger a special effect
Monitoring string changes
event listeners
Regular expression judgement string input
Processing input, calling cornify_add() when qualified

code analysis

1. Specifies a string that can trigger a special effect

const pressed = [];
const secretCode = 'liyc';

Declare an empty array pressed for keyboard input character processing, and a secret key string secretCode for triggering effects.

2. Monitoring string changes

Declare a div for string input changes

<div style="font-size:40px;color:red" class="input_word_pre"></div>
<div style="font-size:40px;color:blue" class="input_word_af"></div>

Getting div objects

const input_word_pre = document.querySelector('.input_word_pre');
const input_word_af = document.querySelector('.input_word_af');

Update div display data

input_word_pre.innerText = pressed.join('');
...
input_word_af.innerText = pressed.join('');

3. Event monitoring

window.addEventListener('keyup', callback);

addEventListener monitors keyup changes in keyboard input and callback functions are called when the keyboard pops up.

4. Regular expression judgment string input

const regex = new RegExp('[A-z]', 'gi');
<!--Determine that the letters on the keyboard you enter are A - z Characters of-->
if (e.key.length === 1 && e.key.match(regex)) {
    ... 
}

5. Processing input and calling cornify_add() when it meets the criteria

<!--When pressed When the number of characters in the array is larger than the number of key strings, the first one will be deleted with each new character added.-->
pressed.splice(0, pressed.length - secretCode.length);
<!--When`pressed`When a string of consecutive characters in an array contains a given secret key, it is called`cornify_add();`function-->
if (pressed.join('').includes(secretCode)) {
    cornify_add();    
}

Complete code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>

<body>

  <div style="font-size:20px;color:green">Please enter:liyc</div>

  <div style="font-size:40px;color:red" class="input_word_pre"></div>
  <div style="font-size:40px;color:blue" class="input_word_af"></div>
  <script>
    const pressed = [];
    const secretCode = 'liyc';
    const input_word_pre = document.querySelector('.input_word_pre');
    const input_word_af = document.querySelector('.input_word_af');

    window.addEventListener('keyup', (e) => {
      const regex = new RegExp('[A-z]', 'gi');
      if (e.key.length === 1 && e.key.match(regex)) {
        pressed.push(e.key);
        input_word_pre.innerText = pressed.join('');
        pressed.splice(0, pressed.length - secretCode.length);
        input_word_af.innerText = pressed.join('');
        if (pressed.join('').includes(secretCode)) {
          console.log('DING DING!');
          cornify_add();
          // alert(secretCode);
        }
      }
    });
  </script>
</body>

</html>

Source Download

Github Source Code

Community Brand: From Zero to Yiquantan Tribe

Orientation: Finding a Technology Community of Common Good, Learning Together and Continuously Exporting Full Stack Technology

Industry Honor: Logical Thinking in IT

Culture: Output is the best way to learn

Official Public Number: Quantan Tribe

Community sponsors: Spring Brother (from zero to one founder, exchange tweets: liyc 1215)

Technology Exchange Community: Quantai tribe BBS

Complete series of tutorials for Quantai Tribes: Whole stack tribe complete e-book learning notes

Pay attention to the official public number of the whole stack tribe, receive a series of original technology push every night at 10 o'clock

Posted by gasoga on Sat, 08 Jun 2019 15:54:07 -0700

Programmer Group