Question

如何在语义-ui-react中禁用带有凭据的自动填充表单？试过这个，但它不起作用

import { Form } from 'semantic-ui-react';
<Form autoComplete="off">
....
</Form>

Answer 1

我认为你不能将autoComplete放在Form上。而是在Form.Group或每个Input上尝试。

Answer 2

它应该工作。当我在我的应用程序上测试它时，它适用于我的。所以它不是语义 - 反应的问题。

Answer 3

<Form autoComplete="off">
</Form>

为我工作...应该不是问题

Answer 4

这不适用于我的情况，下拉列表字段的名称为“州”，因此Chrome地址自动填充功能会忽略自动填充属性。经过一番挣扎，我发现role =“ presentation”可以解决问题。所以我通过ref.ref.firstChild和setAttribute（'role'，'presentation'）从下拉列表中获得输入ref。就像魅力一样

Answer 5

<Form autoComplete="off">将呈现为HTML <form autocomplete="off">（link1），然后将禁用所有表单字段的自动填充功能，密码除外，因为{ {3}}，我们还可以在其中阅读：

如果要定义用户管理页面，用户可以在其中为其他人指定新密码，因此要防止自动填写密码字段，则可以使用autocomplete =“ new-password”。

引出答案的第二部分：如何为各个字段设置autocomplete属性？ off 或 new-password 或link2（给定名称，电子邮件，< em>国家…）。

这些组件没有专用的道具（link1），但是可以通过将内容模板传递给该组件来解决：

<Form.Input type="password" name="mypassword" required>
    <input autoComplete="new-password" />
</Form.Input>

该组件随后将合并模板属性及其道具以进行渲染：

<div class="ui input">
    <input autocomplete="new-password" name="mypassword" required="" type="password">
</div>

如何在语义-ui-react中禁用表单自动完成？

5 个答案: