Dragging Hot Virtual Keyboard on Chrome

Working on a solution today to have the Hot Virtual Keyboard Chrome extension allow user to drag the keyboard without it disappearing.

There is a function bind in the extension code for blur that will close the keyboard. Unfortunately, the text input field goes to a blur state when the user would start to drag the onscreen keyboard. To work around this, I modified the following file in the Chrome extension path and commented out the blur handler.

(function CS_initiate() {

  this.CS_attachKeyboard = function(elem) {
    if (elem.getAttribute(HVKeyboardDefined)) return false;

    elem.setAttribute(HVKeyboardDefined, true);
    CS_addListener(elem, focus, function(e) { TitleShowKb(); }, false);
    /** CS_addListener(elem, blur, function(e) { TitleHideKb(); }, false); **/

Now this causes the keyboard to never disappear, but I set the keyboard to have a title which also has a close button so the user can close the keyboard when no longer needed.

Hot Virtual Keyboard KioskWeb theme with Title Bar

The root of this problem is that the keyboard didn’t float to where the cursor was – it was always at the bottom of the window. This way, the user can now move it to wherever without it disappearing unless they manually close it. It will also re-open the keyboard if they put focus into an input box element on the webpage.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.