search

leafo / sightreading.training

🎹 Sight reading training tool
http://sightreading.training
445 stars 77 forks source link

Virtual keyboard doesn't work on Touch-enabled devices #33

Open aik099 opened 6 years ago

aik099 commented 6 years ago

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.

leafo commented 6 years ago

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?

aik099 commented 6 years ago

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:

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 commented 6 years ago

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

leafo commented 6 years ago

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