输入元素应具有自动完成属性答案

【问题标题】：Input elements should have autocomplete attributes输入元素应具有自动完成属性
【发布时间】：2019-07-25 00:06:43
【问题描述】：

我在控制台中收到此消息，我无法理解。请仔细查看

    <!DOCTYPE html>
<html>
<head>
    <title>registration page</title>
        <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $('form').submit(function(event){
    "use strict";
        var valid = true,
        message = '';    
            $('.error').remove();           
   $('form input').each(function() {
        var $this = $(this);   
        if(!$this.val()) {
            message='';
            var inputName = $this.attr('name');
            valid = false;
            message += 'Please enter your ' + inputName + '\n';
            $(this).closest('div').append('<div class="error">'+message+'</div>');           
        }
})
           if(!valid){
                event.preventDefault();
        }else{
$('form').serialize()
        }
})
})
    </script>
</head>
<body>
<form>
<div>
    <label>Name</label>
    <input type="text" name="name"><br>
</div>
<div>
    <label>File</label>
    <input type="file" name="file"><br>
</div>
<div>
    <label>password</label>
    <input type="password" name="password"><br>
</div>
<button type='submit'>Submit</button>
</form>
</body>
</html>

问题是尽管没有错误，但我一直收到此消息

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"):

我在控制台中获得了一个谷歌链接，该链接将我带到(More info: goo.gl/9p2vKq)

【问题讨论】：

最好将自动完成设置为“关闭”，以后会有所帮助

标签： javascript php jquery google-chrome

【解决方案1】：

尝试改变

<input type="password" name="password">

到

<input type="password" name="password" autocomplete="on">

Autocomplete 让 Web 开发人员可以指定用户代理在填写表单字段值时必须提供哪些（如果有）权限，并指导浏览器了解字段中预期的信息类型。

它非常强大。

【讨论】：

我不想使用自动完成。这是我的选择。为什么是强制性的？
不是，你也可以把那个值设为“off”。
在以前版本的 chrome 中，不需要使用自动完成功能，但现在更新版本需要指定它
@vinayakshahdeo 我知道这是老问题/答案/评论但是如果你使用autocomplete="off"it 会关闭警告。该警告听起来像是必需的，但事实并非如此。您只需要指定它是打开还是关闭，默认情况下它似乎没有默认值。
您好@vinayakshahdeo，这只是作为开发人员的信息。从安全的角度来看，现代共识和观点认为，当用户使用自动完成功能和真正强大的长密码时会更好。否则他们将更有可能选择简单的密码。

【解决方案2】：

关闭自动完成

您有以下格式的options for working with errors输入元素应该有自动完成属性通过修改由控制台抛出：

<input type="password" name="password">

在<form> 或<input> 处将autocomplete 属性设置为off：
- 强制浏览器不存储任何数据
- 在会话历史记录中禁用缓存表单数据

<input type="password" name="password" autocomplete="off">

防止浏览器自动填充的另一种方法是：
以下建议是特定于浏览器的

<input type="password" name="password" autocomplete="new-password"> <!-- For Mozilla-->
<!-- or -->
<input type="password" name="password" autocomplete="current-password"> <!-- For Chrome-->

【讨论】：

我们需要它与两种浏览器兼容，我们不能为每个浏览器编写单独的案例
确实如此，但评论是第二个答案

【解决方案3】：

TypeScript 3.9 让我使用了 autoComplete -- 大写“C”

【讨论】：

【解决方案4】：

它是镀铬的.. 这是为了确保浏览器和扩展程序的密码管理功能可以通过使用少量元数据丰富您的 HTML 来理解您网站的注册、登录和更改密码表单。

这可能会帮助你https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

【讨论】：

我不想使用自动完成。这是我的选择。为什么是强制性的？

【解决方案5】：

来自Chromium Projects' Design Documents：

自动完成属性帮助密码管理员推断表单中字段的用途，避免他们意外保存或自动填充错误数据。

您可以在需要由密码管理器管理的 HTML 元素上使用 autoComplete 属性以自动填充其值。 autoComplete 属性的值取决于您希望向密码管理器传达更多信息的字段。考虑以下示例：

当前密码字段 - autoComplete="current-password"
新密码字段 - autoComplete="new-password"
信用卡字段 - autoComplete="cc-number"

【讨论】：

【解决方案6】：

React with Bootstrap 要求我也使用带有大写“C”的 autoComplete。

【讨论】：

react 使用驼峰式大小写，这就是为什么你必须使用“C”