{"id":2752,"date":"2013-01-30T11:30:19","date_gmt":"2013-01-30T17:30:19","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2752"},"modified":"2013-12-26T00:32:06","modified_gmt":"2013-12-26T06:32:06","slug":"jsvk-a-jquery-plugin-for-virtualkeyboard","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/01\/30\/jsvk-a-jquery-plugin-for-virtualkeyboard\/","title":{"rendered":"jsvk<\/code>, a jQuery Plugin for VirtualKeyboard"},"content":{"rendered":"

I've been using Ilya Lebedev's JavaScript VirtualKeyboard<\/a> for a while<\/a>, and even created a small plugin to integrate it with jQuery. But I wanted to make it more jQuery-ish, so I made a new version of jsvk<\/code>, the plugin to wrap Ilya's code.<\/p>\r\n

See a demo that allows dynamic control of keyboard layout and skin (CSS)<\/a>, and a demo that shows multiple inputs, including contenteditable<\/code> and jQuery UI's draggable<\/a>.<\/p>\r\n

Download the code<\/a>.<\/p>\r\n

Usage<\/h3>\r\n

$(element).jsvk(opts)<\/code> to initialize a text-inputing element (either <input><\/code>, <textarea><\/code> or <div contenteditable><\/code>), $(element).jsvk('off')<\/code> to detach the keyboard, and $(element).jsvk()<\/code> reattach the keyboard leaving the options the same. Note that the VirtualKeyboard<\/code> itself is a Singleton<\/a>, so there can only be one open at a time (attaching to one element removes it from another) and that setting opts<\/code> changes the appearance for every attached keyboard. You can do $(element).jsvk(opts)<\/code> on an existing attached keyboard to change the options.<\/p>\r\n\r\n

It requires bililiteRange<\/a> to set the text and selections (the original code does not handle <div contenteditable><\/code> and does not trigger input<\/code> events).<\/p>\r\n\r\n

For <div contenteditable><\/code>, the enter key just inserts a newline, which is treated as white space and thus does not go to a new line. You could try to listen to the input<\/code> event and insert a <br><\/code>, or do what I do in the demo and set the style to white-space: pre-wrap<\/code>. This makes all white space significant, which is generally what I want anyway.<\/p>\r\n

Options<\/h3>\r\n
\r\n
dir<\/code><\/dt>
{String} URL of the directory (without a trailing slash) where the VirtualKeyboard is found. It expects a fixed structure of the directory, so just install it as is from the download<\/a>. This is used exactly once per page; until it is set in some call of jsvk<\/code> all other calls are held and once it's set any future uses of this option is ignored.<\/dd> \r\n
kbdiv<\/code><\/dt>
{jQuery object | Element | String } The container that the keyboard will be placed into (actually $(kbdiv)[0]<\/code>). If not set, creates a new element with $('<div>').insertAfter(this)<\/code>.<\/dd>\r\n
skin<\/code><\/dt>
{String} Name of the CSS directory for styling. The choices are the names of the folders in the css<\/code> directory in opts.dir<\/code>; they are listed in the subversion directory<\/a> and the right of the online demo<\/a>.<\/dd>\r\n
layout<\/code><\/dt>
{String} Name of language\/layout, like 'IL Hebrew' (see the bottom of the online demo<\/a> for choices).<\/dd>\r\n
langfilter<\/code>
{Array of String} list of language codes (the two-letter codes; must be uppercase) to allow in the drop-down menu for language choices (see the right of the online demo for choices<\/a>). Note that this overrides opts.layout<\/code>; if the selected layout is not in the filter list the first layout that is will be chosen.<\/dd>\r\n
nokeyevents<\/code><\/dt>
{Boolean} The Virtual Keyboard normally captures keystroke events to translate them into the virtual keys. Set this to true to detach the event capturing (the on-screen keyboard still works with clicking the buttons). This uses a very hacky way of grabbing the event handler, so it may be buggy, though it seems to work for me.<\/dd>\r\n<\/dl>\r\n

Examples<\/h3>\r\n