Input is not selected on simple touch or tap
android, cordova, ember.js, focus, html
Solution
I had the same concern a few days ago. the problem was the fastclick.js script. I lost so much time with this concern that I decided not to go further in the investigation and just not use this script.
I hope this helps!
Problem
Input boxes in my Cordova Ember app (running on Android 4.4.2) do not get focus when they are touched. In the search route, since there is no other element (all the search results are links), adding `autofocus` to the input box works. I am working on a login page. There are three input boxes. No matter what I do (more on that below), the boxes do not get focus on touch (there is no issue on the desktop as I can simply click the input box). How can this be solved? These are the things that I tried: - I read a question on SO that said that the issue was solved in `Cordova 2.0`. I am on 3.4.1, but no joy. - If I add autofocus to the input box, it works. But it is pointless when there are more than one input boxes on the page. I read that removing ``` -webkit-user-select: none; ``` would solve the issue. It didn't. I also tried replacing 'none' with 'text', 'all'. I found that the focus can be brought into the input box by holding the touch over the input for a short time. This brings up the device's copy (cut, paste) interface. But since that is not what the user expects, I seek a proper solution. UPDATE I just found out that there is no issue in Samsung Galaxy S2 (Jellybean). But does not work in my Moto G (KitKat). Is this an issue with KitKat? SOLVED As @Trotpof answered, the issue is precisely due to `fastclick.js`. I removed it and everything works perfect. There isn't even any noticeable delay in opening links. However I would like to know why the same code worked differently in Jellybean and Kitkat. Here is the [remaining] css (I removed all the unnecessary ones) that come by default in a new Cordova app : ``` *{ -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ } body{ -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ } ```