与 Dojo 验证一起使用时，Chrome 41 密码保存会做出错误的选择

Posted 2023-02-24

【中文标题】与 Dojo 验证一起使用时，Chrome 41 密码保存会做出错误的选择

【英文标题】：Chrome 41 password saving makes wrong choice when used with Dojo validation

【发布时间】：2015-04-01 21:38:03

【问题描述】：

Chrome 的“保存密码”功能在提供记住密码时显然是一个简单的选择：它查看 DOM 中前一个输入字段的值，并提供将密码键入该值。所以如果你有这个用户名/密码组合：

<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 提供了将“mypassword”记在“X”名下，这很尴尬。

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

【参考方案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>

【讨论】：

对我不起作用.. Chrome 总是想将“X”保存为用户名。不过密码是正确的。

【参考方案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。使用值“用户名”和“密码”向您的输入字段添加自动完成

<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