一种表单中可以有多少个自动完成属性？
单个表单中可以拥有的自动完成属性数量是否有限制？看来，如果我在输入上有三个或更多自动完成属性的变体，浏览器自动填充仍然有效。如果我只添加一个属性，它就可以正常工作。发生这种情况有原因吗？我真的无法在网络或其他遇到此问题的人上找到答案。
在最近的更新中，chrome 是否不关心将自动完成功能设置为关闭或像 nope 这样的随机字符串？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-center mb-3">Contact Me</h1>
Broken Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone" autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Working Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Form with autocomplete="off" broken Version
<form action="#" autocomplete="off">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required>
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
</body>
</html>Is there a limit on how many autocomplete attributes you can have in a single form? It seems if I have a variation of three or more autocomplete attributes on inputs the browser autofill still works. If I just have one attribute added it works just fine. Is there a reason why this is happening? I really cannot find an answer on the web or anyone else who is having this issue.
Has there been in the recent update where chrome just doesn't care for the autocomplete to be set to off or a random string like nope?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-center mb-3">Contact Me</h1>
Broken Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone" autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Working Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Form with autocomplete="off" broken Version
<form action="#" autocomplete="off">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required>
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了解决这个问题，我只是使用 Just-validate 进行自己的验证。这仍然允许 chrome 自动填充工作，但现在它不会绕过默认的最小字符 HTML 属性。
To fix this I just used Just-validate to make my own validations. This still allows for chrome autofill to work but now it won't bypass the default min character HTML attributes.