тип ввода = номер для логина и сохранения пароля

Question

Рассмотрите эту форму

<form action="/user" method="post" accept-charset="UTF-8"><div>
<input placeholder="Mobile number" name="name" value="" size="60" maxlength="60" type="number">
<input placeholder="Password" type="text" name="pass" size="60" maxlength="128" autocomplete="off">
<input type="submit" name="op" value="LOGIN">
</form>

В моем приложении я использую номер телефона для входа пользователя. Я хочу, чтобы цифровая клавиатура отображалась для этого ввода, поэтому вместо input type=text мы используем input type=number

Однако это вызывает проблемы с некоторыми браузерами, которые, по-видимому, не распознают это поле как имя пользователя, и поэтому больше не предоставляет выпадающий список автозаполнения имени пользователя и не заполняет ниже input type=password, когда я на chrome мобильном телефоне.

Выпадающее имя пользователя автозаполнения, которое заполняет пароль, видно и работает на Chrome рабочем столе, но не на Chrome мобильном.

Answer 1

Вам нужно добавить атрибут автозаполнения, чтобы помочь браузерам понять, что происходит. Это должно помочь.

<div class="md-form">
   <input type="tel" class="form-control validate" name="Username" tabindex="20"
                        autocomplete="username" required autofocus>
   <label for="Username">Username</label>
</div>

Я не уверен, какое расширение я установил в VS Code, но когда я набираю атрибут, он дает мне возможные значения для управления этим.

Вы Следует также отметить, что вы можете добавить атрибут арии вокруг этого. Для этого вам может понадобиться добавить список опций, я не проверял, как это сделать.