CODEWITHSUNDEEP
jqueryhtmlmobilejavascript
Sherzod
Sherzod

Reputation: 5131

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!

Upvotes: 12

Views: 45258

Answers (3)

hodgef
hodgef

Reputation: 1436

I recommend simple-keyboard. Especially to those looking for a lightweight javascript virtual keyboard without any dependency (jQuery or otherwise) or are interested in a flexbox layout.

You can find the demo here: View Demo

simple-keyboard

Disclosure: I'm the author of the package. Feel free to message here or on Github with any questions or issues you have.

Upvotes: 4

Gregg B
Gregg B

Reputation: 13727

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/

Upvotes: 12

czerasz
czerasz

Reputation: 14260

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.

Upvotes: 8

Related Questions