CODEWITHSUNDEEP
htmliosiphoneformsinput
NickMcB
NickMcB

Reputation: 917

input[type=password] IOS not rendering keyboard (Safari+Chrome)

I've noticed an issue with password inputs and IOS devices. When you focus on a password input the keyboard should display but instead I get an empty white box.

This is happening on the most basic password input:

<input type="password" name="password">

And I've tried a few variations:

<input type="password" name="password" autocomplete="new-password">

Currently I have a 'work-around' which starts the input as type="text" then once the user has keyed a character change the input type to password (which keeps field hidden/secured but allows keyboard to display). The issue with this is that is won't autocomplete existing passwords (e.g. on login screen select email + autocomplete password).

Here is the issue on Google's login screen replicated using BrowserStack (we've also replicated this issue on real device) iPhone 11 IOS 13

iPhone 11 IOS 13 Password Missing Keyboard Bug

Update: This is effecting IOS 13 + 14, but not earlier versions.

Upvotes: 10

Views: 5824

Answers (2)

Mathieu Godin
Mathieu Godin

Reputation: 91

From what I can gather, BrowserStack uses Screen Mirroring to display the device. Apple introduced a security update as of iOS 13 where passwords type inputs hide the keyboard on the screen you're casting/mirroring to. You can replicate this by testing it on an Apple TV, or by sharing your screen during a call. Therefore, it's not really a bug, but a limitation on testing on a platform instead of physical device.

Upvotes: 9

NaturalDevCR
NaturalDevCR

Reputation: 852

Certainly this could be an iOS update bug issue, I can suggest a different way to simulate the password input...

First add this to your custom css file or anywhere you make your css classes:

Basically you are creating a class to mask the input to hide the password

/* Mask the input as password */
.password-mask {
    -webkit-text-security: disc;
    -moz-webkit-text-security: disc;
    -moz-text-security: disc;
}

Then you can use it right in your input like this:

<input class="password-mask" required type="text" autocomplete="current-password">

For the autocomplete attribute, you need to use: current-password in order to make it behave as the password input.

Upvotes: 3

Related Questions