Replaced deprecated keyCode functionality and docs with KeyboardEvent.code & KeyboardEvent.key also updates the keyIsDown function to accept alphanumerics as parameters #7472

Vaivaswat2244 · 2025-01-17T19:12:50Z

Changes:

This PR modernizes keyboard event handling by transitioning from the deprecated keyCode property to the modern KeyboardEvent.code and KeyboardEvent.key properties. This change improves keyboard input reliability and brings p5.js in line with current web standards.

Updated keyboard event handling to use KeyboardEvent.code instead of e.which
Added proper key tracking using _code property
Updated keyboard constants to use modern string values
Updated keyIsDown function to use alphanumeric as parameters

Screenshots of the change:

/preview/index.html test sketch is:

const sketch = function(p) {
      p.setup = function() {
        p.createCanvas(800, 600);
        p.textSize(16);
        p.textFont('monospace');
      };

      p.draw = function() {
        p.background(240);
        let y = 30;

        // Title
        p.fill(0);
        p.text("keyIsDown() Test", 20, y);
        y += 40;

        // Current key state
        p.text(Current key: ${p.key}, 20, y);
        y += 25;
        p.text(Current code: ${p._code}, 20, y);
        y += 25;

        // Test keyIsDown with direct codes
        p.text("Code String Tests:", 20, y);
        y += 25;
        p.text('ArrowLeft': ${p.keyIsDown('ArrowLeft')}, 40, y);
        y += 20;
        p.text('KeyA': ${p.keyIsDown('KeyA')}, 40, y);
        y += 40;

        // Test keyIsDown with single characters
        p.text("Single Character Tests:", 20, y);
        y += 25;
        p.text('a': ${p.keyIsDown('a')}, 40, y);
        y += 20;
        p.text('A': ${p.keyIsDown('A')}, 40, y);
        y += 20;
        p.text('1': ${p.keyIsDown('1')}, 40, y);
        y += 40;

        // Show current _downKeys object
        p.text("Current _downKeys object:", 20, y);
        y += 25;
        p.text(JSON.stringify(p._downKeys, null, 2), 40, y);
      };

PR Checklist

npm run lint passes
Inline documentation is included / updated
Unit tests are included / updated

davepagurek

Thanks for taking this on, this is a great start!

I think we might need to keep track of two downkey objects, one for codes and one for keys, in order to fully support querying of both.

davepagurek · 2025-01-19T15:47:59Z

src/core/constants.js

 /**
- * @typedef {18} ALT
+ * @typedef {'AltLeft' | 'AltRight'} ALT


Is there a reason why the typedef is both of these while the constant is just one?

davepagurek · 2025-01-19T15:51:37Z

src/events/keyboard.js

+    console.log('Current key:', this.key);
+
+    // For backward compatibility - if code is a number
+    if (typeof code === 'number') {


Does this work if our key event handlers only set _downkeys[e.code]?

Also @limzykenneth do you think we need backwards compatibility? We might need to put a lookup table like this https://stackoverflow.com/a/66180965 into our code to map old key codes to keys, although it looks like it's hard to get complete backwards compatibility. That's probably enough though.

Since the numerical code has been deprecated as a standard, we can remove it since its the point of this implementation to use the easier code property instead.

davepagurek · 2025-01-19T15:57:07Z

src/events/keyboard.js

+      if (code.length === 1) {
+        if (/[A-Za-z]/.test(code)) {
+          // For letters, we need to check the actual key value
+          return this.key === code;


I think this only checks if the last pressed key was the one passed in, rather than if that key is currently down. We might need to make two objects, _downKeyCodes and _downKeys, and update both on keydown/keyup.

okay, got it

davepagurek · 2025-01-19T15:59:46Z

src/events/keyboard.js

+          // For letters, we need to check the actual key value
+          return this.key === code;
+        } else if (/[0-9]/.test(code)) {
+          return this._downKeys[`Digit${code}`] || false;


We should probably be consistent and check for keys if code.length === 1 and check for key codes otherwise.

yes, we are currently checking with key if code.length === 1. and checking for code otherwise. I'm assuming that we have to completely replace the usage the keyCode ig

Fully replacing event.keyCode is correct! I think ideally we could tell users that if they pass in a code (e.g. 'Digits3'), then it will check if that physical key is pressed, and if the user passes in a character (e.g. '3'), it checks whether whatever key produces that character is pressed. I think that would mean we have to detect whether they passed in an event.key or an event.code, and then handling each branch separately.

The slight inconsistency right now is if the user passes in the string '3', it is checking for the physical key via the code still.

Okay, got it.
I think this logic might work, for allowing the user to enter both key and code and seperate classification of them

fn.keyIsDown = function(input){ if (typeof input ==='string'){ if (input.length === 1) { return this._downKeys[input] || (/[0-9]/.test(input) && this._downKeyCodes[`Digit${input}`]) || false; } return this._downKeyCodes[input] || this._downKeys[input] || false; } return false; };

here _downKeyCodes is storing e.code and _downKeys is storing e.key.
now if user passes 'a' or '3', this will be checked by key and returned true,
and if passes 'Digit3', this will be checked by code and returned true. and for special keys such as Enter, ' ', Shift, ShiftLeft, this will give true as they are getting checked for key or code.
Hence, user can use either key or code for the keyisDown function,

Sounds good! It might makes sense to make a isCode() function that we can call, so you can do:

fn.keyIsDown = function(input) { if (isCode(input)) { return this._downCodes[input]; } else { return this._downKeys[input]; } }

...and possibly also unit test isCode separately too.

davepagurek · 2025-01-19T16:02:30Z

src/events/keyboard.js

+    // For string inputs (new functionality)
+    if (typeof code === 'string') {
+      // Handle single character inputs
+      if (code.length === 1) {


Maybe we should also add an else if branch to handle the multi-character possibilities for key, for things like Enter and the arrow keys: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values If it's one of those, we would need to check against down keys as opposed to down key codes.

There are some overlap between key and code, we'll need to decide which to prefer in case of overlap I think.

here, we are using key only for the single characters(because of same code for characters i.e. keyA for 'a' and 'A') and for rest of the inputs we are using code

limzykenneth · 2025-01-20T12:02:01Z

src/events/keyboard.js

@@ -97,6 +97,8 @@ function keyboard(p5, fn){
   */
  fn.isKeyPressed = false;
  fn.keyIsPressed = false; // khan
+  fn._code = null;


If this is only used in this module and not used by other modules through the instance, it should be a local variable and not attached to fn if possible.

Well, currently user is able to do
text(key, 50, 50) giving the key of the key pressed.
Maybe the same can be done for code with added documentation.

limzykenneth · 2025-01-20T12:03:30Z

src/events/keyboard.js

-  fn.keyIsDown = function(code) {
-    // p5._validateParameters('keyIsDown', arguments);
-    return this._downKeys[code] || false;
+    p5.prototype.keyIsDown = function(code) {


This should still be fn.keyIsDown and the indentation fixed.

src/events/keyboard.js

davepagurek

I think this is almost there! I left a few things to clean up, and then as a last thing we can delete the keyCode property from here:

p5.js/src/events/keyboard.js

Line 292 in 9cfef5a

fn.keyCode = 0;

src/events/keyboard.js

davepagurek · 2025-01-29T21:36:45Z

src/core/constants.js

 * @property {CONTROL} CONTROL
 * @final
 */
-export const CONTROL = 17;
+export const CONTROL = 'ControlLeft';


Each constant can only be defined as one thing, so we might need to make two constants instead of a single one

@davepagurek So, I'm not entirely sure what to do for this.
Should I make two constants one for key and code, like...

export const CONTROL_CODE = 'Control'; export const CONTROL_KEY = 'ControlLeft';

I was thinking originally having a const CONTROL_LEFT and CONTROL_RIGHT, but on second thought, the use case before of having a single CONTROL implies that it doesn't matter which. So it probably makes most sense to just export const CONTROL = 'Control so that it ends up using the key instead of the keyCode so that it would check for both.

I think this might mean we need to update isCode so that isCode('Control') returns false though. And for everything we do for Control, we would also do for Alt and Shift, since they have a left/right version too.

… dev-2.0

Vaivaswat2244 · 2025-02-01T10:45:48Z

hello @davepagurek , there has been a commit in the dev-2.0 branch for using meta key. That has been made assuming the usage of keycode. In that implementation, a new object of _metaKeys has been created for storing keyCode of meta key. But this implementation of using key and code already handles the case of meta as well. So should I go ahead and resolve those conflicts by removing the metaKey object?

davepagurek · 2025-02-01T11:44:06Z

That's fine as long as the original issue is resolved! Try using the instructions in this comment #7282 (comment) to see what the original issue was, and then if that works on your branch already, we can take out the special casing that was added in main.

Vaivaswat2244 · 2025-02-01T13:26:15Z

Yeah, its working. In the issue #7282, you tested for event.metaKey && event.keyCode == 90,
with changes by this pr, it handles for the event.metaKey && event.key === 'z' also for code and keyCode as well.

davepagurek

Thanks for doing the merge, it's great that we can simplify the meta key situation with your code!

davepagurek · 2025-02-01T22:23:19Z

src/core/constants.js

 * @property {CONTROL} CONTROL
 * @final
 */
-export const CONTROL = 17;
+export const CONTROL = 'ControlLeft';


I was thinking originally having a const CONTROL_LEFT and CONTROL_RIGHT, but on second thought, the use case before of having a single CONTROL implies that it doesn't matter which. So it probably makes most sense to just export const CONTROL = 'Control so that it ends up using the key instead of the keyCode so that it would check for both.

I think this might mean we need to update isCode so that isCode('Control') returns false though. And for everything we do for Control, we would also do for Alt and Shift, since they have a left/right version too.

… dev-2.0

davepagurek · 2025-02-03T20:43:43Z

src/events/keyboard.js

@@ -916,6 +925,15 @@ function keyboard(p5, fn){
   * </div>
   */
  function isCode(input) {
+    const leftRightKeys = [


Just noticed that we're defining isCode twice -- I think we can remove this one, and just use the exported one above.

Oh yeah, sure.

davepagurek · 2025-02-03T20:45:41Z

test/unit/events/keyboard.js

@@ -189,6 +189,11 @@ suite('Keyboard Events', function() {
      assert.isTrue(isCode('Control'));
      assert.isTrue(isCode('ab'));
    });
+
+    test('returns false for strings for letright keys', function() {
+      assert.isFalse(isCode('AltLeft'));


I think we want AltLeft to return true actually, and just Alt to return false. I'm testing out the demo on MDN here: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code#try_it_out

Hitting the alt key, it outputs: KeyboardEvent: key='Alt' | code='AltLeft'

Yeah, that's right.

fixed this, returning false for keys and true for codes

davepagurek

Thanks for your patience making all these changes, great work! I think we're good to go!

davepagurek · 2025-02-04T17:46:39Z

@all-contributors please add @Vaivaswat2244 for code

allcontributors · 2025-02-04T17:46:43Z

@davepagurek

@Vaivaswat2244 already contributed before to code

Vaivaswat2244 added 3 commits January 17, 2025 15:25

changed keyboard.js and added the updated objects in costants.js file

dd458c0

fixed the repeat key issue in onkeyup

bcbed0f

updated keyIsDown() to work with characters as arguments

c42bb7e

davepagurek reviewed Jan 19, 2025

View reviewed changes

limzykenneth reviewed Jan 20, 2025

View reviewed changes

fixed dillema of code/key and added isCode()

5709aac

davepagurek reviewed Jan 23, 2025

View reviewed changes

src/events/keyboard.js Outdated Show resolved Hide resolved

davepagurek reviewed Jan 23, 2025

View reviewed changes

src/events/keyboard.js Show resolved Hide resolved

Vaivaswat2244 and others added 2 commits January 26, 2025 10:51

added tests for isCode and small changes

0ce4e89

Merge branch 'dev-2.0' into dev-2.0

9cfef5a

davepagurek reviewed Jan 29, 2025

View reviewed changes

Vaivaswat2244 added 2 commits January 31, 2025 01:52

minor changes for single digit input

e0c4a31

Merge branch 'dev-2.0' of https://github.com/Vaivaswat2244/p5.js into…

ad5ae5b

… dev-2.0

Merge branch 'dev-2.0' into dev-2.0

805a5c9

davepagurek reviewed Feb 1, 2025

View reviewed changes

Vaivaswat2244 added 2 commits February 3, 2025 16:11

isCode updated with tests

6d0c0ea

Merge branch 'dev-2.0' of https://github.com/Vaivaswat2244/p5.js into…

e01add6

… dev-2.0

davepagurek reviewed Feb 3, 2025

View reviewed changes

fix earlier mistake in inCode

e3fc37c

davepagurek approved these changes Feb 4, 2025

View reviewed changes

davepagurek merged commit 063a862 into processing:dev-2.0 Feb 4, 2025
2 checks passed

davepagurek mentioned this pull request Feb 4, 2025

Clean up modifier key constants #7526

Merged

Replaced deprecated keyCode functionality and docs with KeyboardEvent.code & KeyboardEvent.key also updates the keyIsDown function to accept alphanumerics as parameters #7472

Replaced deprecated keyCode functionality and docs with KeyboardEvent.code & KeyboardEvent.key also updates the keyIsDown function to accept alphanumerics as parameters #7472

Conversation

Vaivaswat2244 commented Jan 17, 2025 • edited Loading

PR Checklist

davepagurek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaivaswat2244 Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaivaswat2244 Jan 21, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davepagurek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaivaswat2244 Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaivaswat2244 commented Feb 1, 2025 • edited Loading

davepagurek commented Feb 1, 2025

Vaivaswat2244 commented Feb 1, 2025

davepagurek left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davepagurek left a comment

Choose a reason for hiding this comment

davepagurek commented Feb 4, 2025

allcontributors bot commented Feb 4, 2025

Vaivaswat2244 commented Jan 17, 2025 •

edited

Loading

Vaivaswat2244 Jan 21, 2025 •

edited

Loading

Vaivaswat2244 Jan 21, 2025 •

edited

Loading

Vaivaswat2244 Jan 30, 2025 •

edited

Loading

Vaivaswat2244 commented Feb 1, 2025 •

edited

Loading