Mottie / Keyboard

Virtual Keyboard using jQuery ~
http://mottie.github.io/Keyboard/
Other
1.78k stars 723 forks source link

addAltKeyPopup Dropping characters from physical keyboard input #664

Closed dlinch closed 6 years ago

dlinch commented 6 years ago

Hello, I've been seeing an odd behavior ever since I added the altKeyPop extension to my keyboard. Whenever I use the physical keyboard to type in a value, the extensions callbacks seems to block input intermittently and the result is dropped characters from the input.

The example is when I type "Hello there my old friend" what will actually appear in the input is: "Hello ter my ol frend". I don't think I have any more callbacks than a normal implementation, and I worry the setTimeout in the implementation is blocking keyboard input for a fraction of a second, not enough to notice when clicking the virtual buttons with the mouse, but enough that a quick typer loses their characters when using their physical keyboard.

Is there any combination of other callbacks that exacerbates the feedback loop that makes this character dropping happen?

Here is the config for my keyboard:

    .keyboard(keyboardOptions)
    .addAltKeyPopup({
      // events fired after the popup is visible & hidden
      popupVisible: 'popup-visible',
      popupHidden: 'popup-hidden',
      // time to hold down a button in milliseconds to trigger a popup
      holdTime: 800,
    })
 this.board = $('#keyboard', this.$el).getkeyboard();
 this.board.$el.on('keyboardChange', (e, keyboard) => {
      this._maskInput(keyboard.$preview.val())

      if (keyboard.last.virtual) {
         handleTouch(e)
      } else {
        resetSleepTimer()
      }
    });

keyboardOptions is roughly equal to:


      language: [locale],
      acceptValid: true,
      layout: 'custom',
      appendLocally: true,
      userClosed: false,
      stayOpen: true,
      position: false,
      openOn: null,
      caretToEnd: true,
      maxLength: 240,
      display: display,
      accepted: this._renderSearch.bind(this),
      canceled: this._destroyKeyboard.bind(this),
      customLayout: layout,
      validate: this._validateResults.bind(this),
      comboRegex : /([\u0060])([a-z])/ig,
      combos : {
        '\u0060' : {
          a: "\u00e1",
          A: "\u00c1",
          e: "\u00e9",
          E: "\u00c9",
          i: "\u00ed",
          I: "\u00cd",
          o: "\u00f3",
          O: "\u00d3",
          u: "\u00fa",
          U: "\u00da",
        },
    })```

Thank you!
Mottie commented 6 years ago

Hi @dlinch!

Thanks for reporting this problem! I'll get this fixed soon.

Mottie commented 6 years ago

I ended up switching to use event.key within the extension code. This event property is supported in most modern browsers, but not all. I bumped the extension's major version because of this change.

dlinch commented 6 years ago

@Mottie Excellent, thank you for the prompt response!