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.

davepagurek · 2025-01-23T16:39:27Z

src/events/keyboard.js

-    // For backward compatibility - if code is a number
-    if (typeof code === 'number') {
-      return this._downKeys[code] || false;
+    // If it's a single digit, it should be treated as a code (with "Digit" prefix)


Is there a reason why we should treat single digits as codes rather than keys, like we would for alphabetic single characters?

Well, no specefic reason for that. for single character such as a or A, we cant use code because of overlapping value KeyA, while for numeric, it doesn't matter.

If a user remaps their keyboard to a different layout, the codes will be the same as before, but the keys will be different, so there could be a difference still between handling the key for a digit and the code for a digit. If we automatically convert digits to codes, then there would be no way for a user to handle the keys for the digits, only the codes (e.g. if you pass in '1', it would turn into the code 'Digit1'). If we don't special-case digits, though, then users can handle both, either by passing in '1' if they want the key, or Digit1 if they want the code.

Also, when I run the test script in preview/index.html.
It gives friendly error in console that keyisDown is expecting number as parameter, not string.
I looked into the param_valdator and validate_params file but couldn't any call to keyboard.js file.
Can you guide me to how to fix this.

oh good catch! It gets the expected type from the comment above the function here:

p5.js/src/events/keyboard.js

Line 113 in 5709aac

* @property {String} key

but it only updates the values used by FES when you run npm run docs. Try giving that command a run and then testing it out again, does that fix it?

Looks like this is an error in FES. For now just ignore parameter validation, I can handle that in a separate PR. For your own testing, you can set p5.disableFriendlyErrors = true to avoid the error.

I'm working on a fix in #7497, once that's merged you can update your fork to include new changes from dev-2.0 and it should be ok again!

Sure,
Also I had a problem while writing the tests, like after writing the tests for the new isCode function,
I am getting the isCode not defined error while it is defined in the keyboard.js and also works when I test its usage in the preview file.
these are the tests,

suite('p5.prototype.isCode', function() { test('returns false for non-string inputs', function() { assert.isFalse(isCode(null)); assert.isFalse(isCode(undefined)); assert.isFalse(isCode(123)); assert.isFalse(isCode({})); assert.isFalse(isCode([])); }); test('returns false for single non-digit characters', function() { assert.isFalse(isCode('a')); assert.isFalse(isCode('Z')); assert.isFalse(isCode('!')); assert.isFalse(isCode(' ')); }); test('returns true for multi-character strings', function() { assert.isTrue(isCode('Enter')); assert.isTrue(isCode('ArrowUp')); assert.isTrue(isCode('Shift')); assert.isTrue(isCode('Control')); assert.isTrue(isCode('ab')); }); test('handles edge cases correctly', function() { assert.isFalse(isCode('')); // empty string assert.isTrue(isCode('11')); // multi-digit number assert.isTrue(isCode('1a')); // digit + letter }); });

i wanted to change this as per the updated logic but stuck here because of this. Can you recommend something for this.
The isCode function is like this,
fn.isCode = function(input){...}

I'd recommend moving isCode outside of function keyboard and exporting it, i.e.:

export function isCode(input) { // ... } function keyboard(p5, fn) { // ... }

Then, in your test file, you can import it:

import { isCode } from '../../../src/events/keyboard.js';

yupp this worked. Thanks!

davepagurek · 2025-01-23T16:39:44Z

src/events/keyboard.js

+    return input.length > 1;
+  }
+  fn.keyIsDown = function(input) {
+    if (isCode(input)) {


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

return input.length > 1;

}

fn.keyIsDown = function(input) {

if (isCode(input)) {

Copy link

Contributor

davepagurek Jan 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Vaivaswat2244 commented Jan 17, 2025 •

edited

Loading

davepagurek left a comment

davepagurek Jan 19, 2025

davepagurek Jan 19, 2025

davepagurek Jan 19, 2025

limzykenneth Jan 20, 2025

davepagurek Jan 19, 2025

Vaivaswat2244 Jan 21, 2025

davepagurek Jan 19, 2025

Vaivaswat2244 Jan 21, 2025

davepagurek Jan 21, 2025

Vaivaswat2244 Jan 21, 2025 •

edited

Loading

davepagurek Jan 22, 2025

davepagurek Jan 19, 2025

limzykenneth Jan 20, 2025

Vaivaswat2244 Jan 21, 2025

limzykenneth Jan 20, 2025

Vaivaswat2244 Jan 21, 2025 •

edited

Loading

limzykenneth Jan 20, 2025

davepagurek Jan 23, 2025

Vaivaswat2244 Jan 23, 2025

davepagurek Jan 23, 2025

Vaivaswat2244 Jan 23, 2025

davepagurek Jan 23, 2025

davepagurek Jan 25, 2025

davepagurek Jan 25, 2025

Vaivaswat2244 Jan 25, 2025

davepagurek Jan 25, 2025

Vaivaswat2244 Jan 26, 2025

davepagurek Jan 23, 2025

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

Are you sure you want to change the base?

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

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

Choose a reason for hiding this comment

Vaivaswat2244 commented Jan 17, 2025 •

edited

Loading

Vaivaswat2244 Jan 21, 2025 •

edited

Loading

Vaivaswat2244 Jan 21, 2025 •

edited

Loading