云主机测评网云主机测评网云主机测评网

云主机测评网
www.yunzhuji.net

HTML 在网站上禁用密码字段的预测文本

在网站上禁用密码字段的预测文本,可以通过以下几种方法实现:

(图片来源网络,侵删)

1、使用HTML属性autocomplete="off"

在HTML表单中的密码输入框,添加autocomplete="off"属性,可以禁止浏览器自动填充密码。

<form>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" autocomplete="off">
  <input type="submit" value="提交">
</form>

2、使用JavaScript禁用预测文本

通过JavaScript,可以监听密码输入框的input事件,当输入内容发生变化时,将输入框的值设置为空,从而禁止浏览器自动填充密码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>禁用预测文本</title>
  <script>
    function disablePredictions(input) {
      input.addEventListener('input', function() {
        input.value = '';
      });
    }
  </script>
</head>
<body>
  <form>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" oninput="disablePredictions(this)">
    <input type="submit" value="提交">
  </form>
</body>
</html>

3、使用CSS禁用预测文本

通过CSS,可以设置密码输入框的outline样式为none,从而禁止浏览器自动填充密码,但这种方法可能不适用于所有浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>禁用预测文本</title>
  <style>
    input[type="password"]:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <form>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="提交">
  </form>
</body>
</html>
打赏
版权声明:主机测评不销售、不代购、不提供任何支持,仅分享信息/测评(有时效性),自行辨别,请遵纪守法文明上网。
文章名称:《HTML 在网站上禁用密码字段的预测文本》
文章链接:https://www.yunzhuji.net/jishujiaocheng/149889.html

评论

  • 验证码