使用键盘输入序列显示隐藏/不可见的表格输入

Posted 2021-05-03

TL;DR

我希望在用户按下特定键序列后，表单输入变为可见。有一个简单的解决方案吗？它甚至可能吗？我应该注意哪些考虑因素？

---

Background

我认为在我的代码中隐藏一些复活节彩蛋可能会很有趣，以供其他开发者找到。

我想到的是一个可选的表单输入，只有在按顺序按下一系列按键时才能显示（如“显示”或“方向输入模式”）。我想要一种方法，无论哪个元素聚焦，都可以检测到模式。

---

Some Complications

在寻找解决方案并阅读this Medium article之后，显而易见的是，尽管这个问题听起来有多么简单，但这可能是一个巨大的，耗时的错误，我会后悔倾注我的生命。

检测用户键盘输入是一回事，但是检查每个连续按键的顺序是否正确是我的联盟。

---

Potential Backup Solutions

对于其他任何有这个问题的人：我想出了一些利用JS / jQuery的潜在备份方法，我可以使用它来显示输入，但是没有人接受方向输入，它们会破坏我原来的一个或多个要求。

• 使用accesskey属性将焦点设置为隐藏锚点并显示输入字段
• 使用onload事件将焦点设置在不可见的表单输入上
• 当可见输入的值设置为特定值时，将显示输入
• 单击隐藏的div以使其显示
• 将重点放在URL字符串中使用其ID

答案

这是一个代码片段，可以满足您的需求：

var keypresses = [];
document.addEventListener('keyup', function(e) {
  keypresses.push(e.key);
  if (keypresses.slice(-3).join("") === "abc") {
    alert("easter egg!");
  }
});

说明

• keypresses变量初始化为包含键入键的历史记录。
• 每次事件触发时： 键入的键将加载到历史记录中。 最后3个键入的键将连接成一个字符串，以便进行简单比较：keypresses.slice(-3).join("") 将根据代码检查连接的字符串（在我的示例中为abc）。如果匹配，将执行if语句体内的代码。有趣的注意事项：我在输入此部分时被警报打断，因为我在此页面上测试了我的代码。

笔记

• 无论焦点UI元素如何，这都应该起作用，因为事件直接在文档上。
• 如果用户可能在单个页面上花费大量时间并按下大量按键，您可能需要定期清除keypresses变量。当我输入这个时，我的keypresses变量中有这篇文章的完整副本。