javascript - 使用键盘输入序列显示隐藏/不可见表单输入

Question

TL;DR

我希望表单输入在用户按下特定的按键序列后变得可见。有一个简单的解决方案吗？有可能吗？有什么我应该注意的注意事项吗？

<小时/>

背景

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

我想到的是一个可选的表单输入，它只能在按顺序按下一系列按键时显示(例如“显示”一词或定向输入模式)。我想要一种无论哪个元素处于焦点都可以检测到模式的方法。

<小时/>

一些并发症

在搜索解决方案并阅读 this Medium article 后，很明显，尽管这个问题听起来很简单，但这可能是一个巨大的、耗时的错误，我会后悔在其中投入了我一生的时间。

检测用户键盘输入是一回事，但检查每个连续击键的顺序是否正确则超出了我的能力范围。

<小时/>

潜在的备份解决方案

对于遇到此问题的其他人:我想出了一堆利用 JS/jQuery 的潜在备份方法，我可以用它们来显示输入，但没有一个接受定向输入，并且它们破坏了我最初的一个或多个要求。

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

Answer 1

这里有一个代码片段，可以满足您的需求:

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

说明

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

注释

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