{"id":1324,"date":"2010-12-26T22:54:21","date_gmt":"2010-12-27T04:54:21","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=1324"},"modified":"2013-01-29T20:38:58","modified_gmt":"2013-01-30T02:38:58","slug":"using-javascript-virtualkeyboard-with-jquery","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2010\/12\/26\/using-javascript-virtualkeyboard-with-jquery\/","title":{"rendered":"Using JavaScript VirtualKeyboard with jQuery"},"content":{"rendered":"<p><strong>Update: Connie Wiolowan of allanguages.info has made <a href=\"\/blog\/2010\/12\/26\/using-javascript-virtualkeyboard-with-jquery\/#comment-2916\">some comments<\/a> and I've updated the post to reflect them. Thanks!<\/strong><\/p>\r\n<p>Connie also created a <a href=\"http:\/\/allanguages.info\/virtualkeyboard\/jquery.vk.js\">jQuery plugin<\/a> for the virtual keyboard; see <a href=\"\/blog\/2010\/12\/26\/using-javascript-virtualkeyboard-with-jquery\/#comment-2916\">the comment<\/a> for details.<\/p>\r\n\t<script src=\"http:\/\/bililite.com\/inc\/jquery.ui.subclass.js\" type=\"text\/javascript\"><\/script>\r\n\t<script src=\"http:\/\/bililite.com\/inc\/jquery.textpopup.js\" type=\"text\/javascript\"><\/script>\r\n\t<script type=\"text\/javascript\" src=\"\/inc\/VirtualKeyboard.full.3.7.1\/vk_loader.js?vk_layout=IL%20Hebrew&vk_skin=flat_gray\" ><\/script>\r\n<p><a href=\"\/blog\/2010\/12\/14\/great-virtual-keyboard\/\">I like<\/a> Ilya Lebedev's <a href=\"http:\/\/www.allanguages.info\/\">JavaScript VirtualKeyboard<\/a> a lot. It's clever, got an elegant UI, allows you to remap the physical keyboard to any language you want, and has an <a href=\"http:\/\/www.allanguages.info\/forum\/viewforum.php?f=4\">active and responsive support forum<\/a>. But it's got a few quirks that make it hard to use with jQuery.<\/p>\r\n<ul>\r\n<li>Virtually no documentation. You have to read the source to get anywhere. But here's a brief introduction (assuming you use jQuery):\r\n<ol>\r\n<li style=\"list-style:decimal\">Download the package from <a href=\"http:\/\/sourceforge.net\/projects\/jsvk\/files\/VirtualKeyboard%203.6.x\/VirtualKeyboard%203.6.6\/\">SourceForge<\/a>, unzip the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Tar_(file_format)\">tarball<\/a> and put the whole folder (don't mess up the organization!) somewhere accessible.<\/li>\r\n<li style=\"list-style:decimal\">Include the script with <code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"\/path\/to\/files\/vk_loader.js\" &gt;&lt;\/script&gt;<\/code>.<\/li>\r\n<li style=\"list-style:decimal\">Have a blank <code class=\"language-html\">&lt;div&gt;<\/code> in your HTML that will house the keyboard. I'll use <code class=\"language-html\">&lt;div id=\"jsvk\" \/&gt;<\/code> in these instructions.<\/li>\r\n<li style=\"list-style:decimal\">Have one or more <code class=\"language-html\">&lt;input type=\"text\" &gt;<\/code>s or <code class=\"language-html\">&lt;textarea&gt;<\/code>s that will accept the keyboard input.<\/li>\r\n<li style=\"list-style:decimal\">In your <code class=\"language-javascript\">$(document).load<\/code> function, include the statement <code class=\"language-javascript\">VirtualKeyboard.show($('input')[0], $('#jsvk')[0])<\/code>.<\/li>\r\n<li>Other useful functions include <code class=\"language-javascript\">VirtualKeyboard.hide()<\/code> that hides the keyboard and removes it from the DOM, <code class=\"language-javascript\">VirtualKeyboard.attachInput($('input')[0])<\/code> that leaves the keyboard visible where it was but associates a new input element with it, and <code class=\"language-javascript\">VirtualKeyboard.detachInput()<\/code> that leaves the keyboard visible but removes the association with an input element.<\/li>\r\n<li><code class=\"language-javascript\">VirtualKeyboard.open<\/code> is a synonym for <code class=\"language-javascript\">VirtualKeyboard.show<\/code>  and <code class=\"language-javascript\">VirtualKeyboard.close<\/code> is a synonym for <code class=\"language-javascript\">VirtualKeyboard.hide<\/code>.<\/li>  \r\n<\/ol>\r\n<\/li>\r\n<li>The <code>VirtualKeyboard<\/code> is a <a href=\"http:\/\/c2.com\/cgi\/wiki?SingletonPattern\">Singleton<\/a>. This means that you can only have one keyboard shown on a page, and the \"skin\" (the CSS of the keyboard) is fixed at initialization even if you move it around and associate it with different input elements. It also means that if you use the keyboard for different input elements, changing the language for one changes it for all of them. You can get around this by putting the keyboard into its own document and using iframes or popup windows, and the code includes samples for both of those.<\/li>\r\n<li>The package is <em>huge<\/em>. The \"compacted\" version is 4 MB. Most of that is the development files, so it's not like every page downloads megabyte files (the largest downloaded file is the keyboard layout package, about 390K), but it's still huge.<\/li>\r\n<li>Part of the reason that it's so big is that it does everything. Lebedev has put an entire Javascript library into this package, including its own event manager that overrides jQuery's. So you can't do <code class=\"language-javascript\">$('input').click(function(evt){})<\/code> on elements that are attached to the keyboard. You have to use his <code class=\"language-javascript\">EM.addEventListener(self.element[0],'click', function(evt){})<\/code>.<\/li>\r\n<li>Options are too clever by half: he parses the <code class=\"language-html\">&lt;script src=\"\/path\/to\/vk_loader.js?query-string&gt;<\/code> query string to get them. So to set the initial layout and the skin, I used <code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"\/path\/to\/vk_loader.js?vk_layout=IL%20Hebrew&vk_skin=flat_gray\" &gt;&lt;\/script&gt;<\/code>. Options are:\r\n<ul>\r\n<li>vk_skin: name of folder in the \/css folder in the package to use for the CSS<\/li>\r\n<li>vk_layout: name of the keyboard layout. The available names are listed on the right hand side of the <a href=\"http:\/\/www.allanguages.info\/\">home page<\/a> or the <a href=\"http:\/\/debugger.ru\/projects\/virtualkeyboard\/layouts\">project developement page<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p>But these are really minor issues for such a great package, and adapting it to use jQuery isn't that hard (I'm using my <a href=\"\/blog\/2009\/01\/02\/new-ui-widgets-textpopup-and-hebrewkeyboard\/\"><code>textpopup<\/code> plugin<\/a> as a base):<\/p>\r\n<pre><code class=\"language-html demo\">\r\n&lt;div id=\"example\"&gt;\r\n\tExample: &lt;br\/&gt;&lt;input style=\"float:left\"\/&gt;&lt;input style=\"float:right\"\/&gt;\r\n\t&lt;br style=\"clear:both\"\/&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\nvar keyboard = false; \/\/ VirtualKeyboard is a singleton, so we have to make sure there's just one container\r\n$.ui.textpopup.subclass(\"ui.jsvk\", {\r\n\t_createBox: function(){\r\n\t\tif (keyboard) return keyboard;\r\n\t\tvar self=this;\r\n\t\tself._super();\r\n\t\tkeyboard = self.theBox;\r\n\t\tVirtualKeyboard.open(self.element[0], self.theBox[0]);\r\n\t\tEM.addEventListener(self.element[0],'keypress', function(e){\r\n\t\t\tif (e.getKeyCode()==27) self.hide();\r\n\t\t});\r\n\t\treturn self.theBox;\r\n\t},\r\n\tshow: function(){\r\n\t\tVirtualKeyboard.attachInput(this.element[0]);\r\n\t\tthis._super();\r\n\t},\r\n\thide: function(){\r\n\t\tVirtualKeyboard.detachInput();\r\n\t\tthis._super();\r\n\t}\r\n});\r\n\r\n$('#example input:eq(0)').jsvk({position: 'bl'});\r\n$('#example input:eq(1)').jsvk({position: 'br'});\r\n<\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"Update: Connie Wiolowan of allanguages.info has made some comments and I've updated the post to reflect them. Thanks! Connie also created a jQuery plugin for the virtual keyboard; see the comment for details. I like Ilya Lebedev's JavaScript VirtualKeyboard a lot. It's clever, got an elegant UI, allows you to remap the physical keyboard to [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1324"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":33,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"predecessor-version":[{"id":2751,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1324\/revisions\/2751"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}