Page MenuHomePhabricator

TOTP challenge entry not marked numeric-only on mobile
Closed, ResolvedPublic

Description

Applies to w29 stable, and the version currently running on this install.


Configure TOTP 2FA for your user account.

Log in on a mobile browser.

TOTP challenge prompt displays the full keyboard, not the numeric-only version, as the field is not fully annotated in the DOM.

It would be nice if this were the case.

IMG_4904.PNG (1×750 px, 101 KB)

Event Timeline

epriestley triaged this task as Normal priority.

Offhand, do you know if <input type="number" /> has the desired behavior on your device?

Looks like an iPhone with Gboard keyboard.

On iPhone Simulator, the behavior of <input type="number" /> appears to be "draw the keyboard for 1 frame and then immediately hide it".

Oh, there's a "Toggle Software Keyboard" option that I somehow disabled.

On iOS 9.2 in the simulator, <input type="number" /> gives you this keyboard:

Screen Shot 2016-07-23 at 1.22.56 PM.png (1×752 px, 132 KB)

This also makes desktop Safari render the control with a weird little increment sub-control, which is useless in this context (note "" and "" buttons inside the control on the right):

Screen Shot 2016-07-23 at 1.16.06 PM.png (129×519 px, 17 KB)

With <input type="text" pattern="\d*" />, I get the desired keyboard:

Screen Shot 2016-07-23 at 1.24.01 PM.png (1×752 px, 123 KB)

On desktop Safari on OSX, this appears to have no special behavior (I can type letters into the control).

On desktop Chrome on OSX, this also appears to have no special behavior.

On desktop Firefox on OSX, this also appears to have no special behavior.

I don't have a convenient way to test any Android mobile devices locally.

D16323 uses <input type="text" pattern="\d*" />, which appears to have the best behavior.

@epriestley Missed a spot: D16325

Beyond that, it does exactly the right thing on real iOS. Thanks!