Tapping text input field on iPhone brings up keyboard, but typing will not put in any text

Question

I'm working on making a page more responsive. To that end, I'm trying to make sure a web page looks and functions as intended on mobile devices.

On the desktop, it works as expected.

On the iPhone, it looks as expected, but doesn't work as expected. If you select the input field, it'll focus and bring up the keyboard. It however won't let you type anything. If you select the text input field once again, it'll finally allow you to type.

Here's the link: ASLChoice

Make sure you view it using an iOS device to reproduce the issue. Any ideas? I've googled this issue, and it seems no results are showing on Google that are similar to my issue. I've also searched StackOverflow.

Feedback is certainly appreciated. Thanks in advance!

I have experience a similar issue, but only intermittently. Sometimes, a web app saved to the home screen in iOS has text fields which cannot receive text input. I've confirmed nowhere on the site uses `-webkit-user-select` or `user-select`, and in fact I've setup a simple html test which contains no css or js. It seems to have a greater chance of working if I clear Safari's browsing data before saving the web app. — Quinn Comendant, Jun 06 '19 at 21:55

score 4 · Answer 1 · edited Apr 05 '19 at 18:53

4

I know what it is.

I noticed that -webkit-user-select: text; was overwritten, so make sure this property is working fine, well if the browser does not find that property you cannot input anything in your fields.

Cheers

edited Apr 05 '19 at 18:53

Kevin F

2,836
2
16
21

answered Jan 17 '14 at 14:25

Fabry

53
5

score 1 · Answer 2 · edited Jun 20 '18 at 08:04

Thanks Fabry for a hint on the solution.

I have implemented a small code (google helped!) to override the CSS -webkit-user-select .
Possibly on IPad/IPhone when we launch our application , this particular CSS Property is set to webkit-user-select : none which disables the input fields.
To override it with webkit-user-select : text here is the small part of code I preferred to write in Init method of my Controller (whenever the controller is loaded the events would be defined)

 jQuery('body').on('touchstart', function(e){ 
          jQuery("input").focusin(function() { 
              jQuery("body").css("-webkit-overflow-scrolling", "auto"); 
              jQuery("input").css("-webkit-user-select", "text"); 
          });
          jQuery("input").select(function() {
              jQuery("body").css("-webkit-overflow-scrolling", "auto");
              jQuery("input").css("-webkit-user-select", "text");
          });
          jQuery("input").blur(function() {
              jQuery("body").css("-webkit-overflow-scrolling", "touch");
              jQuery("input").css("-webkit-user-select", "none");
          });        
      });

The code is for input tags and specific touch events. You can use it for any type of tag like textarea too..Depends on coder!

I hope it helps.

Tapping text input field on iPhone brings up keyboard, but typing will not put in any text

2 Answers2

Linked