0

You can see my token input here on the search box: http://pineapple.io/

Under normal circumstances, there is a hidden input that expands when you click in the box.

It seems to work great in all desktop browsers, but on a mobile phone when you click in the right area of the box (which normally works on a desktop), it doesnt click inside the tiny invisible input. You need to actually click to the farthest most point (directly to the right of the magnifying glass) and then it will work.

Here is where it must be clicked:

enter image description here

I assume this has to do with the 'touch' rather than click functionality of a phone?

Source is here: http://loopj.com/jquery-tokeninput/

Tallboy
  • 12,847
  • 13
  • 82
  • 173

1 Answers1

0

Your input is really small (currently it's hard-coded at width: 30px), hence why the mobile doesn't like it. Can you make that bigger? That would probably help a lot!

Here's a picture to explain: http://cl.ly/image/0b3N471F1y3O

Jamund Ferguson
  • 16,721
  • 3
  • 42
  • 50
  • I remember trying to change that at one point. Unfortunately I remember that it created difficulties when adding new tags. The reason it's small is when a new tag is added next to it, it prevents it from 'jumping'. I was thinking maybe theres some way to tell the mobile browser auto focus the box on click? – Tallboy Aug 20 '12 at 22:05
  • 1
    The `autofocus` HTML5 attribute is really crummy on mobile and not well supported, but you can do some trickier stuff like this: http://stackoverflow.com/questions/6287478/mobile-safari-autofocus-text-field – Jamund Ferguson Aug 20 '12 at 22:12