Need to click a keyboard button On mouse over

[PGdevsoft]

mouseenter: function () {
var aClick = $(this);
$(aClick)[0].click(function(){ }); // click current button is mouse over
},
mouseleave: function () {
}
}, 'button.ui-keyboard-button');

[Mottie]

Hi @PGdevsoft!

Try this (demo):

$(function() {
  var debounce;
  $("#keyboard")
    .keyboard({
      visible: function(e, keyboard) {
        keyboard.$keyboard
          .find('.ui-keyboard-button[data-value="a"]')
          .on("mouseover", function() {
            clearTimeout(debounce);
            debounce = setTimeout(function() {
              keyboard.insertText("a");
            }, 200);
          });
      }
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});

I noticed that actually triggering a "mousedown" (or "repeater") event on a button was causing one of the keys being hovered over to be inserted instead of the actual button. I think it's because moving the mouse triggers some other parts of the code. So I opted for this more reliable insertText method. I'll investigate why this wasn't working when I get some time.

If you're trying to click on an action button, then call the action directly. For example, to move the caret left, replace the code inside the setTimeout like this:

debounce = setTimeout(function() {
  $.keyboard.keyaction["left"](keyboard);
}, 200);

[PGdevsoft]

Thank You so much.
You very awesome ^^

This is my solution. http://jsfiddle.net/egb3a1sk/3294/
thank you so much again.

[PGdevsoft]

I have a new problem. http://jsfiddle.net/egb3a1sk/3302/

1. I can't use backspace on function keyboard.showKeySet('backspace') to delete last word.
2. I can't switch keyboard layout from main language to second language.
3. When use keyboard.showKeySet('shift') then use keyboard.insertText keyboard not shift down to nomal layout

Thank you for advanced @Mottie

[Mottie]

Ahh, ok... try this demo:

I had to make these changes:

• Backspace is accomplished by using insertText('\b').
• Switching languages requires the use of redraw, which completely rebuilds the keyboard so all event listeners are broken. So a mouseOverClick function was created to attach event handlers.
• Switching keysets or languages causes a new "mouseover" event to trigger on the key that appears under the mouse, so to avoid that key from triggering an event a delayMouseoverOnChangeLayout function was created to modify a lock flag. This flag prevents the mouseover from triggering within the first 200 ms. Adjust this time as needed.

$.keyboard.keyaction.th = function(kb) {
  kb.redraw("th");
  mouseOverClick(kb);
};
$.keyboard.layouts.th = {
  lang: ["th"],
  normal: [
    "\u005F \u0E45 \u002F \u002D \u0E20 \u0E16 \u0E38 \u0E36 \u0E04 \u0E05 \u0E08 \u0E02 \u0E0A {bksp}",
    "\u0E46 \u0E44 \u0E33 \u0E1E \u0E30 \u0E31 \u0E35 \u0E23 \u0E19 \u0E22 \u0E1A \u0E25 \u0E03 ",
    "\u0E1F \u0E2B \u0E01 \u0E14 \u0E40 \u0E49 \u0E48 \u0E32 \u0E2A \u0E27 \u0E07",
    "{shift} \u0E1C \u0E1B \u0E41 \u0E2D \u0E34 \u0E37 \u0E17 \u0E21 \u0E43 \u0E1D ",
    "{accept}  {space} {en} {cancel}"
  ],
  shift: [
    "% + \u0E51 \u0E52 \u0E53 \u0E54 \u0E39 \u0E3F \u0E55 \u0E56 \u0E57 \u0E58 \u0E59 {bksp}",
    "\u0E50 \u0022 \u0E0E \u0E11 \u0E18 \u0E4D \u0E4A \u0E13 \u0E2F \u0E0D \u0E10 \u002C \u0E05",
    "\u0E24 \u0E06 \u0E0F \u0E42 \u0E0C \u0E47 \u0E4B \u0E29 \u0E28 \u0E0B \u002E",
    "{shift} ( ) \u0E09 \u0E2E \u0E3A \u0E4C \u003F \u0E12 \u0E2C \u0E26",
    "{accept} {space} {en} {cancel}"
  ]
};

$.keyboard.keyaction.en = function(kb) {
  kb.redraw("en");
  mouseOverClick(kb);
};
$.keyboard.layouts.en = {
  normal: [
    "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
    " q w e r t y u i o p [ ] \\",
    "a s d f g h j k l ; '",
    "{shift} z x c v b n m , . / ",
    "{accept} {space} {cancel} {th} {en}"
  ],
  shift: [
    "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
    " Q W E R T Y U I O P { } |",
    'A S D F G H J K L : " ',
    "{shift} Z X C V B N M < > ?",
    "{accept} {space} {cancel} {th} {en}"
  ]
};

var debounce;
var lockout = false;
// When switching layouts, the new keyset will trigger a "mouseover"
// on the same key causing it to switch back.
function delayMouseoverOnChangeLayout() {
  lockout = true;
  setTimeout(function() {
    lockout = false;
  }, 200);
}

function mouseOverClick(keyboard) {
  keyboard.$keyboard
    .off("mouseover", ".ui-keyboard-button")
    .on("mouseover", ".ui-keyboard-button", function() {
      var $btn = $(this);
      var txt = $btn.text();
      clearTimeout(debounce);
      if (lockout) {
        return;
      }
      debounce = setTimeout(function() {
        if (txt == "Accept") {
          keyboard.accept();
        } else if (txt == "Cancel") {
          keyboard.close();
        } else if (txt == "") {
          keyboard.insertText(" ");
        } else if (txt == "Shift") {
          delayMouseoverOnChangeLayout();
          keyboard.showKeySet(
            $btn.hasClass("ui-state-active") ? "normal" : "shift"
          );
        } else if (txt == "Bksp") {
          keyboard.insertText("\b");
        } else if (txt == "en" || txt == "th") {
          delayMouseoverOnChangeLayout();
          $.keyboard.keyaction[txt](keyboard);
        } else {
          keyboard.insertText(txt);
        }
      }, 500);
    });
}

$("#keyboard")
  .keyboard({
    visible: function(e, keyboard) {
      $("body").addClass("keyboard-opened");
      mouseOverClick(keyboard);
    },
    canceled: function(event, keyboard, el) {
      $("body").removeClass("keyboard-opened");
    },
    autoAccept: true,
    enterNavigation: true,
    layout: "th"
  })
  // activate the typing extension
  .addTyping({
    showTyping: true,
    delay: 1
  });

[Mottie]

I was adding the above to the main wiki page and forgot I created this demo (see #589) with a slightly different method.

[PGdevsoft]

Thank you for great support
I found some problem with shift key

Then inserted some text on shift layout but layout not switch to nomal layout
http://jsfiddle.net/Mottie/egb3a1sk/3304/

[Mottie]

Oops sorry, I needed to include a "mouseleave" event listener and clear the timer

http://jsfiddle.net/Mottie/0wft9tpv/

I changed these first few lines:

keyboard.$keyboard
  .off("mouseover mouseleave", ".ui-keyboard-button")
  .on("mouseleave", ".ui-keyboard-button", function() {
    clearTimeout(debounce);
  });

[PGdevsoft]

Thank you so much.
My problem is all solved.