Keyboard numbers vs. number pad numbers

[paraviz02]

Hello, we have a "PIN pad" and are trying to figure out how we can map the normal keyboard number keys and the number pad keys together so that they will both highlight the same simple-keyboard key.

For example, if we use the {numpad1} key in simple-keyboard, it only highlights when using the number pad key, but not the "1" key on the keyboard. And vice versa, if we use the 1 key, only the "1" key on the keyboard will highlight, but not the number pad key.

Is there a configuration item that I have missed, or something that I can do to have this type of function?

Thank you!

[hodgef]

Hello @paraviz02,

Are you implementing this in vanilla JS, or is it Angular or Vue?

Also, are you using this kind of set-up?
https://simple-keyboard.com/demo/#fullkeyboard

[paraviz02]

Hello @hodgef - thanks for the super-quick reply!

We're using vanilla JS, with jQuery. Attached is an image of the way we have styled the number pad.

The layout is:
layout:{[ "{numpad1} {numpad2} {numpad3}", "{numpad4} {numpad5} {numpad6}", "{numpad7} {numpad8} {numpad9}", "▼ {numpad0} {bksp}" ]}

Hopefully I'm missing something very obvious. Beautiful keyboard, by the way.

~Laz

[hodgef]

Hey @paraviz02,

Unfortunately this use-case is not supported out of the box, so instead of physicalKeyboardHighlight the feature would have to be custom.

Luckily I had done custom highlighting of the keys before. Here's an implementation resembling your use-case:

Demo: https://codesandbox.io/s/github/simple-keyboard/simple-keyboard-custom-highlight-button/tree/master/

Hope that helps! If it doesn't let me know and I'll reopen the ticket :)

Francisco Hodge

[paraviz02]

Awesome, I will check that out. Thanks Francisco. Cheers!