12 键盘输入序列的验证指南

优质

小牛编辑

127浏览

2023-12-01

实现效果

初始文档里仅仅提供了一个 script 标签，供我们从 Cornify.com 加载一个 JS 文件，调用其中的 cornify_add() 方法时，会在页面中追加 p 标签，并在 DOM 中插入一个图标。Cornify 的具体效果可以到官网首页去体验。

而这个挑战要实现的效果是，当在此页面完整输入了“暗号”（一串事先定义好的字符串）时，生成新的 Cornify 特效。

声明一个空数组，用于存放的输入字符，同时声明“暗号”
```
 const pressed = [],
       secretCode = 'helloworld'
```
添加键盘的 keyup 事件监听，用箭头函数的参数来接收事件。注意此处的 keyup 事件是针对页面的，所以在调试时单击页面后时焦点在页面中才生效，在 Console 面板中是不会触发的。
```
  window.addEventListener('keyup', (e) => { })
```
验证输入的字符。此处方法是将每一个输入的字符存入 pressed 数组，然后处理数组，使其呈现队列的性质，也就是输入一个字符时，会挤出原有的的字符，保证其最大长度始终为 secretCode 的长度。这样做的目的是为了便于验证暗号，只有完整无误的输入一次暗号时，才会触发相应的效果。当然这只是其中一种处理办法，也还有其他办法。
```
 window.addEventListener('keyup', (e) => {
   console.log(e.key);
   pressed.push(e.key);
   pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); //截取数组
   if (pressed.join('').includes(secretCode)) { //判断是否符合暗号
     console.log('DING DING!');
     cornify_add();
 }
```

Bingo，输入暗号后触发特效的页面也就完成了，你可以自由在代码里设置需要的暗号。