sightreading.training icon indicating copy to clipboard operation
sightreading.training copied to clipboard

Published 20 hours ago • verified publisher icon leafo

Virtual keyboard doesn't work on Touch-enabled devices

Open aik099 opened this issue 7 years ago • 4 comments
trafficstars

On the Touch-enabled devices, like iPad when I touch virtual keyboard buttons, then nothing happens.

You might be listening for click event, which happens on desktop browser, but on mobile devices other events like touchend and similar happens. There are JS libraries to that provide aggregated events to cover both desktop and mobile browsers.

aik099 avatar Jun 14 '18 16:06 aik099

The click handler is used, but all mobile browsers should be firing a click event when tapping. I've never had any issues inputting notes (I only have android device to test though). Do you think there's a javascript error on the page blocking something?

leafo avatar Jun 14 '18 22:06 leafo

No errors. The Wait/Scroll and Hide Keyboard buttons work just fine on mobile browsers. Maybe at that breakpoint (media query) something is covering up virtual keyboard (e.g. DIV) and click events don't come though?

Here are my test results for the virtual keyboard:

  • on Google Chrome (desktop): hover effect on mouse over (correct) + no visual effect on click (not sure if it's correct) + actual action to verify note
  • on Google Chrome (desktop) using iPad emulator feature: no effect on mouse over (correct, because no such thing on mobile devices) + visual push down/up effect on touch (correct) + actual action to verify note
  • on Safari/Google Chrome on iPad: nothing at all

Since there are different visual effects for key presses (at least on emulator) for virtual keyboard key presses, then there is some kind of different handling in place JS-wise, but on real iPad it fails unfortunately.

aik099 avatar Jun 15 '18 05:06 aik099

You can create free account on https://www.browserstack.com/live website to test on real mobile devices.

aik099 avatar Jun 15 '18 05:06 aik099

I updated the keyboard widget to use the touch events, instead of the emulated mouse events. It should fix the issue. The keyboard is now immediately responds to taps, but I need a solution for scrolling since initiating a scroll will also press that key.

This fix won't go out until I deploy the next version, which will be when I complete #32

leafo avatar Jun 25 '18 18:06 leafo