输入类型=用于用户名登录和保存密码的数字

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=number而不是input type=text

但是，这会导致某些浏览器似乎无法将此字段识别为用户名的问题，因此当我使用 chrome 移动设备时，它不再在用户名中提供下拉自动完成并填充以下input type=password。

用于填充密码的下拉菜单自动填充用户名可见，并且适用于 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 中安装了什么扩展，但是当我键入属性时，它会为我提供可能的值来驱动它。

您还应该注意，您也可以在此周围添加 aria 属性。为此，您可能需要添加选项列表，我尚未检查如何驾驶它。