<input> has focus, but can't type in WebKit

Question

I have run into a slight problem, and have been tyring to debug it for the past two hours. After deciding that a fresh brain might be able to assist, I decided to post here.

I know that I should post some code here for legacy purposes, but the question involves significant amounts of code, so it's easier to provide a link.

Please check out the following page: http://ben-major.co.uk/labs/phonee/#overlays. If you tap on Prompt (in Chrome or Mobile Safari), you are presented with a prompt box. Here's the snag:

The field has focus (see the white background, rather than the #eee color of the unfocused field), but when trying to type anything into the field, nothing happens, despite the field having focus. I have tried on my MBP (Chrome), iMac (Chrome), iPad + iPhone, and all have the same problem.

Has anyone run into a similar problem, as I really cannot figure out why this doesn't work. There are no event preventions on keyup or similar events...

Joe Johnson · Accepted Answer · 2012-12-22 04:51:58Z

28

-webkit-user-select: none;

Remove that style, and it works. You can alter it in the reset.css file you're using. This works -webkit-user-select: auto; as well.

edited Dec 22, 2012 at 4:51

answered Jul 26, 2012 at 23:20

Joe Johnson

1,82416 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Johnson Over a year ago

I'd recommend looking into the setTimeout function (prompt.js) ... it has a delay of 1ms? Kind of odd. I found the bug quickly... but, haven't dug deep enough to figure out what exactly the problem is. But, removing that style will solve your problem.

BenM Over a year ago

Thanks for your help! I have added in -webkit-user-select: auto to the input selector, and everything is great. Thanks again. By the way, the 1ms timeout is used to force the animation to occur. Removing it prevents the transitioning transforms to show.

sheriffderek Over a year ago

LIFESAVER! I forgot about making some sweeping type selection choices... would never have even looked for that... - thought it was a rouge div in the way.

sheriffderek Over a year ago

Also, I did something closer to this: *:not('textarea, input') { -webkit-user-select: none; } (in a smaller scope ... )

Raja Khoury Over a year ago

after spending an entire day, @JoeJohnson saved my life

Undefined · Accepted Answer · 2012-07-26 23:22:19Z

On line 46 of reset.css you have -webkit-user-select: none; this doesnt allow users to select the textbox on webkit browsers!

Collectives™ on Stack Overflow

<input> has focus, but can't type in WebKit

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related