TL; DR

Question

TL; DR

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

背景

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

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

一些并发症

在寻找解决方案并阅读了this Medium article之后，很明显的是，尽管这个问题听起来很简单，但它可能是一个巨大的，费时的错误，我将为此付出很多时间后悔。

检测用户键盘输入是一回事，但是检查每个连续的击键顺序是否正确并不符合我的意愿。

潜在的备份解决方案

对于有此问题的其他人：我想出了许多使用JS / jQuery的潜在备份方法，可以用来显示输入，但是没有一个接受定向输入，它们违反了我的一个或多个原始要求。 / p>

使用accesskey属性将焦点设置在隐藏的锚点上并显示输入字段
使用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. 键入的密钥将被加载到历史记录中。
2. 最后3个键入的键将合并为一个字符串，以进行简单比较：keypresses.slice(-3).join("")
3. 将根据代码（在我的示例中为abc）检查连接的字符串。如果匹配，则将执行if语句主体中的代码。 有趣的一面：由于我在此页上测试了代码，因此我在输入此部分时被警报打断了。

注释

这应该有效，而不管关注的UI元素是什么，因为该事件直接在文档上。
如果用户可能在单个页面上花费大量时间并按很多键，则可能需要定期清除keypresses变量。 在我键入此内容时，我的keypresses变量中有此帖子的完整副本。

Answer 2

我只是想扩展关于定期清除 keypresses 变量的最佳答案的观点，我只是通过添加第 4 行来做到这一点，我想这样按键只会记住最后 3 个（或任何长度的作弊码）是）按下的键并丢弃其他键：

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

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

TL; DR

背景

一些并发症

潜在的备份解决方案

2 个答案:

说明

注释