可以说，我想要一种可以将现场管理完全从浏览器手中拿走的东西。在本例中，有一个标准的文本输入字段来捕获密码-没有电子邮件、用户名等。。。

<input id='input_password' type='text' autocomplete='off' autofocus>

有一个名为“input”的变量，设置为空字符串。。。

var input = "";

jQuery监视字段事件。。。

聚焦时，始终清除字段内容和关联的“输入”变量。在按键时，任何字母数字字符以及一些定义的符号都会附加到“input”变量，并且字段输入会替换为项目符号。此外，当按下Enter键时，键入的字符（存储在“input”变量中）将通过Ajax发送到服务器。（请参阅下面的“服务器详细信息”。）在设置键时，Home、End和Arrow键会刷新“input”变量和字段值。（我可能会对箭头导航和焦点事件产生兴趣，并使用.selectionStart来确定用户单击或正在导航的位置，但不值得为密码字段付出努力。）此外，按下Backspace键会相应地截断变量和字段内容。

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#\$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

前端摘要

本质上，这使浏览器无法捕获任何有用的内容。即使它覆盖了自动完成设置，和/或显示了一个包含先前输入值的下拉列表，它也只存储字段值的项目符号。

服务器详细信息（可选阅读）

如上所示，一旦服务器返回JSON响应，JavaScript就会执行location.reload（）。（此登录技术用于访问受限制的管理工具。与cookie内容相关的一些过度使用可以被跳过，以实现更广泛的实现。）以下是详细信息：

当用户导航到站点时，服务器会查找合法的cookie。如果没有任何cookie，将显示登录页面。当用户输入密码并通过Ajax发送，服务器确认密码并检查以查看用户的IP地址是否在授权IP地址列表中。如果无法识别密码或IP地址，则服务器不会生成cookie，因此当页面重新加载时，用户会看到相同的登录页面。如果密码和IP地址都被识别，服务器将生成cookie具有十分钟的使用寿命，它还存储与时间帧和IP地址相对应的两个加扰值。当页面重新加载时，服务器会找到cookie并验证加扰值是正确的（即时间帧与cookie的日期相对应并且IP地址相同）。每当用户与服务器交互时，无论他们是登录、显示数据还是更新记录，都会重复验证和更新cookie的过程。如果cookie的值始终正确，服务器将显示完整的网站（如果用户正在登录）或满足提交的任何显示或更新请求。如果在任何时候cookie的值不正确，服务器会删除当前cookie，然后在重新加载时，会导致登录页面重新显示。

这就是：

函数turnOnPasswordStyle（）{$（'#inputpassword'）.attr（'type'，“password”）；}<input-onput=“turnOnPasswordStyle（）”id=“inputpassword”type=“text”>

这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容，即使开发人员认为信息是敏感的，不应存储。

在两个请求之间设置不同的输入名称将解决问题（但仍将保存在浏览器的缓存中，并且还会增加浏览器的缓存）。

要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。

这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的：

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后，服务器像这样处理后置变量：（Demo）

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

而且浏览器将无法从以前的请求或以前的用户那里建议信息。

即使浏览器更新其技术以忽略/尊重自动完成属性，这将继续有效。

如果您在JavaScript中动态设置autocomplete=“off”，Safari不会改变对自动完成的看法。然而，如果您在每个字段的基础上执行此操作，则会受到尊重。

$(':input', $formElement).attr('autocomplete', 'off');

自动填充功能在不选择字段的情况下更改值。我们可以在状态管理中使用它来忽略选择事件之前的状态更改。

React中的一个示例：

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

如果浏览器尝试填充字段，则元素仍被锁定，状态不受影响。现在，您可以用NoAutoFillInput组件替换输入字段，以防止自动填充：

<div className="form-group row">
    <div className="col-sm-2">
        <NoAutoFillInput type="text" name="myUserName" className="form-control" placeholder="Username" value={this.state.userName} onChange={value => this.setState({userName: value})}/>
    </div>
    <div className="col-sm-2">
        <NoAutoFillInput type="password" name="myPassword" className="form-control" placeholder="Password" value={this.state.password} onChange={value => this.setState({password: value})}/>
    </div>
</div>

当然，这个想法也可以用于其他JavaScript框架。

最简单的答案是

<input autocomplete=“on | off”>

但请记住浏览器支持。当前，支持自动完成属性

铬17.0及最新版本IE 5.0及最新版本Firefox 4.0及最新版本Safari 5.2及最新版本Opera 9.6及最新版本