JS Based on-screen keyboard for browser, like on cellphones and tablets
Solution 1
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/
Solution 2
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.
Solution 3
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
Disclosure: I'm the author of the package. Feel free to message here or on Github with any questions or issues you have.
Sherzod
There are only 10 kinds of people in this world: those who know binary and those who don’t.
Updated on July 05, 2022Comments
-
Sherzod almost 2 years
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!
-
Sherzod over 12 yearsI like the nettuts one. I saw jquery4u, but I didn't like it because it was based on jquery ui. Do you know any based on html5 canvas?
-
Gregg B over 12 yearsThis might work: stickmanventures.com/labs/demo/… - more about it here: blog.stickmanventures.com/2011/10/22/…
-
Michael over 10 years@Grillz Interesting demo, although on my phone under Mobile Firefox it claims "You don't seem to have any multitouch support on the desktop. You need some TUIO"... which is odd since I am not on a desktop device, I am on a multi-touch screen device.
-
Faly over 4 yearsIs it possible to show the keyboard only on focus ??
-
Francisco Hodge over 4 yearsHello @Faly, to achieve that you can initially hide the keyboard with CSS then show it via a focus event listener. Here's an example: franciscohodge.com/projects/simple-keyboard/demos/…