Day12 - 鍵盤輸入序列的驗證指南

joy968 發(fā)布于2019-08-20 18:27 / 2266人閱讀

摘要：監(jiān)測字符串變化聲明字符串輸入變化的獲取對象更新顯示數(shù)據(jù)事件監(jiān)聽通過監(jiān)聽鍵盤輸入的變化，當鍵盤彈起時，調(diào)用函數(shù)。

(Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座)

作者：?liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個視頻教程、30 個挑戰(zhàn)的起始文檔和 30 個挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 12 篇。完整中文版指南及視頻教程在從零到壹全棧部落。

項目效果

文檔里提供了一個 script 標簽，供我們從 Cornify.com 加載一個 JS 文件，調(diào)用其中的 cornify_add() 方法時，會在頁面中追加 p 標簽，并在 DOM 中插入一個圖標。Cornify 的具體效果如上所示。

解決思路

指定可激發(fā)特效的字符串

監(jiān)測字符串變化

事件監(jiān)聽

正則表達式判斷字符串輸入

處理輸入，在符合條件時，調(diào)用 cornify_add()

代碼分析 1. 指定可激發(fā)特效的字符串

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

聲明一個空數(shù)組pressed用于鍵盤輸入字符的處理，并且聲明一個秘鑰字符串secretCode用于激發(fā)效果的觸發(fā)。

2. 監(jiān)測字符串變化

聲明字符串輸入變化的div

獲取div對象

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

更新div顯示數(shù)據(jù)

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

3. 事件監(jiān)聽

window.addEventListener("keyup", callback);

addEventListener通過keyup監(jiān)聽鍵盤輸入的變化，當鍵盤彈起時，調(diào)用callback函數(shù)。

4. 正則表達式判斷字符串輸入

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

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

5. 處理輸入，在符合條件時，調(diào)用 cornify_add()


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

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

完整代碼





  
  Key Detection
  




  請輸入:liyc

源碼下載

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續(xù)輸出全棧技術社群
業(yè)界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記

關注全棧部落官方公眾號，每晚十點接收系列原創(chuàng)技術推送

GPU云服務器云服務器雷蛇被曝0day漏洞插入鼠標或鍵盤可快鍵盤輸入循環(huán)鍵盤輸入禁止鍵盤輸入

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84538.html

day1 - JavaScript Drum Kit 中文指南

摘要：中文指南作者簡介是推出的一個天挑戰(zhàn)。頁面基礎布局標簽定義鍵盤文本說到技術概念上的特殊樣式時，就要提到標簽。主要代碼主要屬性有以下幾個中有一個樣式為，在本案例中，就是，是以中的為參照物，就是。 Day01 - JavaScript Drum Kit 中文指南作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 ...

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

摘要：中文指南二作者簡介是推出的一個天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。第七天的練習是接著之前中文指南一的練習，繼續(xù)熟練數(shù)組的方法，依舊沒有頁面顯示效果，所以請打開瀏覽器的面板進行調(diào)試運行。 Day07 - Array Cardio 中文指南二作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰(zhàn)。項目免費提供了 30 個...

Forest10 2019-08-20 18:18 評論0 收藏0