0

TL;DR

I want a form input to become visible after a user presses a specific sequence of keys. Is there an easy solution to this? Is it even possible? Are there any considerations that I should be aware of?

Background

I thought it might be fun to hide some easter eggs in my code for other devs to find.

One I thought of is an optional form input that can only be displayed when a sequence of keys pressed in order (like the word "reveal" or a directional input pattern). I would like a way that the pattern would be detected regardless of which element is in focus.

Some Complications

After searching for solutions and reading this Medium article, it has become apparent that despite how simple this problem sounds, it is probably a monumental, time-consuming mistake that I'll regret pouring hours of my life into.

Detecting user keyboard input is one thing, but checking that each consecutive keystroke is in the correct order is out of my league.

Potential Backup Solutions

For anyone else with this issue: I came up with a bunch of potential backup methods utilizing JS / jQuery that I could use to display the input, but none accept directional input and they break one or more of my original requirements.

  • Using an accesskey attribute to set focus on hidden anchor and reveal the input field
  • Setting focus on an invisible form input using an onload event
  • Making input appear when a visible input's value is set to a specific value
  • Clicking a hidden div to make it appear
  • Setting focus on using its ID in a URL string
Community
  • 1
  • 1
Tyler F.
  • 124
  • 1
  • 12
  • 2
    `$(document).on("keydown",` keep a record of which keys have been pressed, if the current key is not the expected one, then reset the record. In addition, add a `setTimeout()` to clear the record after a delay (eg 1s). – freedomn-m Sep 12 '18 at 08:44
  • 2
    You can quite easily do this. Here's an example which listens to the DOM for the Konami code: https://stackoverflow.com/questions/31626852/how-to-add-konami-code-in-a-website-based-on-html – Rory McCrossan Sep 12 '18 at 08:56
  • Users can always press F12. – Poul Bak Sep 12 '18 at 10:26

2 Answers2

3

Here's a code snippet that does what you're looking for:

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

Explanation

  • The keypresses variable is initialized to hold a history of typed keys.
  • Every time the event triggers:
    1. The typed key will be loaded into the history.
    2. The last 3 typed keys will be joined into a single string for simple comparison: keypresses.slice(-3).join("")
    3. The joined string will be checked against the code (abc in my example). If it matches, the code within the if statement body will be executed. Fun side note: I was interrupted by an alert while typing this section because I tested my code on this page.

Notes

  • This should work regardless of the focused UI element because the event is directly on the document.
  • You may want to regularly clear the keypresses variable if the user may spend a lot of time on a single page and presses a lot of keys. As I type this, there's a full copy of this post in my keypresses variable.
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
rparr
  • 143
  • 4
0

I just wanted to expand on the best answer's point about regularly clearing the keypresses variable, I did it just by adding this 4th line, I imagine this way keypresses will only remember the last 3 (or whatever the length of your cheat code is) keys pressed and discard the others:

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