Day12 - 键盘输入序列的验证指南

joy968 发布于2019-08-20 18:27 / 2264人阅读

摘要：监测字符串变化声明字符串输入变化的获取对象更新显示数据事件监听通过监听键盘输入的变化，当键盘弹起时，调用函数。

(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座)

作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整中文版指南及视频教程在从零到壹全栈部落。

项目效果

文档里提供了一个 script 标签，供我们从 Cornify.com 加载一个 JS 文件，调用其中的 cornify_add() 方法时，会在页面中追加 p 标签，并在 DOM 中插入一个图标。Cornify 的具体效果如上所示。

解决思路

指定可激发特效的字符串

监测字符串变化

事件监听

正则表达式判断字符串输入

处理输入，在符合条件时，调用 cornify_add()

代码分析 1. 指定可激发特效的字符串

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

声明一个空数组pressed用于键盘输入字符的处理，并且声明一个秘钥字符串secretCode用于激发效果的触发。

2. 监测字符串变化

声明字符串输入变化的div

获取div对象

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

更新div显示数据

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

3. 事件监听

window.addEventListener("keyup", callback);

addEventListener通过keyup监听键盘输入的变化，当键盘弹起时，调用callback函数。

4. 正则表达式判断字符串输入

const regex = new RegExp("[A-z]", "gi");

if (e.key.length === 1 && e.key.match(regex)) {
    ... 
}

5. 处理输入，在符合条件时，调用 cornify_add()


pressed.splice(0, pressed.length - secretCode.length);

if (pressed.join("").includes(secretCode)) {
    cornify_add();    
}

完整代码





  
  Key Detection
  




  请输入:liyc

源码下载

Github Source Code

社群品牌：从零到壹全栈部落

定位：寻找共好，共同学习，持续输出全栈技术社群

业界荣誉：IT界的逻辑思维

文化：输出是最好的学习方式

官方公众号：全栈部落

社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)

技术交流社区：全栈部落BBS

全栈部落完整系列教程：全栈部落完整电子书学习笔记

关注全栈部落官方公众号，每晚十点接收系列原创技术推送

云服务器 GPU云服务器雷蛇被曝0day漏洞插入鼠标或键盘可快键盘输入循环键盘输入禁止键盘输入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84538.html

day1 - JavaScript Drum Kit 中文指南

摘要：中文指南作者简介是推出的一个天挑战。页面基础布局标签定义键盘文本说到技术概念上的特殊样式时，就要提到标签。主要代码主要属性有以下几个中有一个样式为，在本案例中，就是，是以中的为参照物，就是。 Day01 - JavaScript Drum Kit 中文指南作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

HackerShell 2019-08-20 18:05 评论0 收藏0
Day07 - Array Cardio 中文指南二

摘要：中文指南二作者简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。第七天的练习是接着之前中文指南一的练习，继续熟练数组的方法，依旧没有页面显示效果，所以请打开浏览器的面板进行调试运行。 Day07 - Array Cardio 中文指南二作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个...

Forest10 2019-08-20 18:18 评论0 收藏0