easier way to trigger input on focused textbox

[jbotte]

Greetings,

I use this keyboard with a search portion of my app. I have the search trigger using the oninput function of the textboxt....

I had to basically do extends on every character to manually trigger the input event....

Below is the js i used to make it work. Is there a more efficient way to do this with mottie keyboard? https://pastebin.ca/3836784

[Mottie]

Hi @jbotte!

The keyboard has a few built-in methods and triggered events you can use. I think you can get away with using the change callback as follows (demo):

$(function() {
  $("#searchTextBox").keyboard({
    layout: "custom",
    customLayout: {
      default: [
        "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 {enter}",
        "z x c v b n m .",
        "{space}"
      ]
    },
    usePreview: false,
    // Auto-accept content when clicking outside the
    // keyboard (popup will close)
    autoAccept: true,
    change: function(event, keyboard, el) {
      $(el).trigger("input"); // 'input' event triggered on textarea
    }
  });
});

Because the keyboard is using jQuery, you can .trigger() an event on the textarea instead of adding extra code to fire the event. You shouldn't need to worry about the fireEvent since you "shouldn't" need to worry about IE10 and older browsers; so using jQuery v2.0+ should be okay.

[jbotte]

Thank you for the excellent advice, I had assumed change wouldn't fire until i hit accept my fault for not trying it first.

It is working perfect.

Thanks again

• John

[Mottie]

There are actually two change events that get fired, but the change callback is always fired when the user interacts.

$("#keyboard").keyboard({
  change: function(event, keyboard, el) {
    // fired on every user input
  }
});

Events fired on the input/textarea element:

• change - Event called after the virtual keyboard content has been accepted or canceled.
• keyboardChange - Event called with every change in the virtual keyboard input (key clicked or manual input) (changed v1.21.0); this event is also fired along with the keyup and keydown events.

$("#keyboard")
  .on("change", function(e, keyboard, el) {
    // fired when content has been accepted or canceled
  })
  .on("keyboardChange", function(e, keyboard, el) {
    // fired on every user input
  });

[jbotte]

exactly what I needed thanks!