Chrome 41 密码保存在与 Dojo 验证一起使用时选择错误

Question

Chrome 的 "Save Password" 功能在提供记住密码时显然做出了一个简单的选择：它查看 DOM 中先前输入字段的值并提供密钥该值的密码。所以如果你有这个 username/password 组合：

<form>
    <input value="myname" />
    <input value="mypassword" />
</form>

浏览器会提示将密码 "mypassword" 保存在密钥 "myname" 下。

然而，这在使用 Dojo ValidationTextBox 时会出现问题，因为 Dojo 解析器插入了一个不可见的 INPUT 控件，其中包含用作验证图标的字符 "X"（简化的 HTML 视图）：

<form>
    <div>
        <input value="X" />
        <input value="myname" />
    </div>
    <div>
        <input value="X" />
        <input value="mypassword" />
    </div>
</form>

在这种情况下Chrome主动提出以"X"的名义记住"mypassword"，这很尴尬。

是否可以在 Chrome 中覆盖此行为？或者我们是否需要在 Dojo 中重写此功能？

Answer 1

向验证小部件添加 name 属性：

this.username = new ValidationTextBox({ name: 'username' });
this.password = new ValidationTextBox({ name: 'password' });

或声明式：

<input type="text" name="username" data-dojo-type="dijit/form/ValidationTextBox" />
<input type="text" name="password" data-dojo-type="dijit/form/ValidationTextBox" />

这将生成具有名称属性的节点，Chrome 将能够使用这些节点将值与键相关联。您的简化 HTML 视图将如下所示：

<form>
    <div>
        <input value="X" />
        <input name="username" value="myname" />
    </div>
    <div>
        <input value="X" />
        <input name="password" value="mypassword" />
    </div>
</form>

Answer 2

我已经知道如何让它发挥作用了。当您使用具有适当值（用户名、密码）的名称属性时，用户名值将是密码输入上方的输入值。

1。用表单包围您的字段

<form method="post">
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
</form>

2。使用值 'username' 和 'password'

向您的输入字段添加自动完成

<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
<input type="password" autocomplete="password" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" /> 

3。添加一个提交按钮或只是一个常规按钮

<input type="submit" value="send" />

见fiddle