How to capture the keypress event when the user is focusing on the canvas?

Photoshop
1

Hi there,
Does anyone know how to capture the keyboard event, like “keypress” and “keyup” event in the UXP code when the user is working on the canvas? (like drawing with pencil tool or filling color with bucket tool).
I want to temporally change the current in used brush settings to a new value when a hotkey is pressed and recover it when that key is released.
And here is something I have tried and searched:

  1. I tried the JS event like,
    document.addEventListener('keypress', ()=>console.log("Key pressed!"));
    But no logs recorded

  2. Then I also checked the UXP event listener, following the tutorial page here:
    Attaching Event Listeners (adobe.io)
    I tried the code snippet on it but the “keypress” seems not a predefined event there. So nothing recorded

I guess the photoshop will take care all these events at a very high priority, but is it still possible for us to use any hotkey in our plugin? Thanks for any help :blush:

2

Did not try myself. I don’t know if the event listener like you used would work for any key. I guess you’d have to specify a key like so:

// Add event listener on keydown
  document.addEventListener('keydown', (event) => {
    var name = event.key;
    var code = event.code;
    if (name === 'Control') {
      // Do nothing.
      return;
    }
    if (event.ctrlKey) {
      alert(`Combination of ctrlKey + ${name} \n Key code Value: ${code}`);
    } else {
      alert(`Key pressed ${name} \n Key code Value: ${code}`);
    }
  }, false);
  // Add event listener on keyup
  document.addEventListener('keyup', (event) => {
    var name = event.key;
    if (name === 'Control') {
      alert('Control key released');
    }
  }, false);
3

I tried to run this code snippet in the console or add them into my code and set a breakpoint there, both way still can’t capture the event.

I also tried using “capture” option like:

document.addEventListener('keydown', (event) => {
    var name = event.key;
    var code = event.code;
	if (name === 'Control') {
      // Do nothing.
      return;
    }
    if (event.ctrlKey) {
      console.log(`Combination of ctrlKey + ${name} \n Key code Value: ${code}`);
    } else {
      console.log(`Key pressed ${name} \n Key code Value: ${code}`);
    }
  }, {capture:true});

And this is not work, too

4

What is document in your case? Because it looks like it’s a DOM document of the panel and not the Ps document. I believe you need to use UXP event listener, which accepts UXP events instead of regular keypress, keydown, etc. Of course if it supports at all such events (didn’t search TBH)

5

Yeah you are right, this document is not the PS doc. OK I will try to do more search on UXP event, and post anything that I find later.
BTW does anyone know any good resource for the UXP event to checkout? I just searched a little bit but seems there is no docs…

I also tried the event notify in this page Photoshop (adobe.io), but unfortunately it seems still not capture any key event.

6

all the selection event is log by “select” event using this event-listener
u can work from there…

u can peek it using alchemist addon… it’s available on creative cloud or

> here

7

But select event is far from keypress or any similar key related events.

1 Like