DEV Community

Francisco Hodge
Francisco Hodge

Posted on

Javascript Virtual Keyboard - Customizable, responsive and lightweight


I introduce you to simple-keyboard, a virtual keyboard compatible with your JS, React, Angular or Vue projects.

This module comes in handy when developing kiosk apps, or when you need a visual input method for your website, mobile or electron app. Unlike default OS screen keyboards, with simple-keyboard you have full control over the look, layout and functionality.

To explore the demos and get started, check out virtual-keyboard.js.org

Top comments (3)

Collapse
 
qm3ster profile image
Mihail Malo

Is it accessible though?
Can I operate it with the keyboard?

Collapse
 
hodgef profile image
Francisco Hodge

Hey @Mihail, there's an option to render all keys as button elements, which could help with accessibility. However, there are currently no aria attributes added to the keyboard for the moment.

You could operate simple-keyboard with your physical keyboard indeed. That functionality is custom to your implementation however.

Check out the following sandbox for an example: codesandbox.io/s/n5mllkkmyl

As you can see, pressing Shift or Caps in your physical keyboard also pressed them on the virtual keyboard :)

You can take a look at the demos for some of the more popular use-cases/examples:

simple-keyboard.com/demo

Cheers,
Francisco Hodge

Collapse
 
qm3ster profile image
Mihail Malo

I'm @qm3ster :v
That is impressive as hell.
I was half-joking because it IS the keyboard, but I understand how that comes in if it's a custom special keyboard on a website.