Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JS Based on-screen keyboard for browser, like on cellphones and tablets

We have an app for an embedded system, and we are developing several apps based on HTML5, CSS3, and some JS libraries, which run on a webkit browser. I was wondering if there are any libraries that implemented on screen keyboard with customizable graphics of keys. It should also be easy to internationalize it.

May be anything based on HTML5 canvas?

I appreciate any input. Thanks!

like image 351
Sherzod Avatar asked Jan 06 '12 18:01

Sherzod


People also ask

What is the use of On-Screen Keyboard tool?

On-Screen Keyboard displays a visual keyboard with all the standard keys. You can select keys using the mouse or another pointing device, or you can use a single key or group of keys to cycle through the keys on the screen.

What is on screen or virtual keyboard?

A virtual keyboard is software that is used to emulate a standard keyboard. A picture of a keyboard is displayed on a computer screen and the user points and clicks on the pictures of keys to enter text. Switches activated in a wide variety of ways make use of the most appropriate muscles for the individual user.


2 Answers

Something like this?

http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/

Additionally, here is a (different) plugin instead of a tutorial:

http://www.sitepoint.com/jquery-on-screen-keyboard/

like image 200
Gregg B Avatar answered Nov 09 '22 10:11

Gregg B


You could try the Virtual Keyboard which has a lot of features, language layouts and is very well documented.
You can also easily integrate it with bootstrap:

$('#keyboard').keyboard({
    layout: 'qwerty',
    css: {
        // input & preview
        input: 'form-control input-sm',
        // keyboard container
        container: 'center-block dropdown-menu', // jumbotron
        // default state
        buttonDefault: 'btn btn-default',
        // hovered button
        buttonHover: 'btn-primary',
        // Action keys (e.g. Accept, Cancel, Tab, etc);
        // this replaces "actionClass" option
        buttonAction: 'active',
        // used when disabling the decimal button {dec}
        // when a decimal exists in the input area
        buttonDisabled: 'disabled'
    }
})

Find the full example here.

You could also try the On Screen Keyboard which is a lot simpler and less feature rich.

like image 31
czerasz Avatar answered Nov 09 '22 10:11

czerasz