Menu
I’m having problems with a form. On Mobile Chrome for Android, when the cursor is left in one of the text inputs, the button has to be clicked twice for onclick to work. This is on a page which has been up (and working) for years. Some recent change to mobile Chrome for Android has caused this problem to express itself. Here’s an example of the problem:
To see the problem in action, try the above page in mobile Chrome on Android. Type “am going to write” into the first box, but leave the cursor in the box. Scroll down and click the “Check” button. The problems is not occuring in various desktop browsers. Occasionally, it works and the pop-up will work. But most of the time, it just bounces back up to the text input.
If I switch onclick to onmousedown, it works perfectly. It also works with ontouchstart, but that won’t validate. I actually need onclick because many students just tab through each blank and hit enter to check their work. Onmousedown won’t work with the enter button.
I have also already tried:
-adding cursor: pointer to css
-adding type=”button”
– switching the button to a clickable div– DevTools Event Listener Breakpoints to step through Javascript, but onclick doesn’t fire the function at all until the second click