输入 type = password,不要让浏览器记住密码

我记得看到一个方法,有一个 <input type="password" />,使浏览器将 没有提示用户保存密码。但我一无所知。是否有一个 HTML 属性或一些 JavaScript 技巧可以做到这一点?

186744 次浏览

Try using autocomplete="off". Not sure if every browser supports it, though. MSDN docs here.

EDIT: Note: most browsers have dropped support for this attribute. See Is autocomplete="off" compatible with all modern browsers?

This is arguably something that should be left up to the user rather than the web site designer.

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

I'd just like to add that as a user I think this is very annoying and a hassle to overcome. I strongly recommend against using this as it will more than likely aggravate your users.

Passwords are already not stored in the MRU, and correctly configured public machines will not even save the username.

You can use JQuery, select the item by id:

$("input#Password").attr("autocomplete","off");

Or select the item by type:

$("input[type='password']").attr("autocomplete","off");

Or also:

You can use pure Javascript:

document.getElementById('Password').autocomplete = 'off';

As for security issues, here is what a security consultant will tell you on the whole field issue (this is from an actual independent security audit):

HTML Autocomplete Enabled – Password fields in HTML forms have autocomplete enabled. Most browsers have a facility to remember user credentials entered into HTML forms.

Relative Risk: Low

Affected Systems/Devices: o https://*******/

I also agree this should cover any field that contains truly private data. I feel that it is alright to force a person to always type their credit card information, CVC code, passwords, usernames, etc whenever that site is going to access anything that should be kept secure [universally or by legal compliance requirements]. For example: purchase forms, bank/credit sites, tax sites, medical data, federal, nuclear, etc - not Sites like Stack Overflow or Facebook.

Other types of sites - e.g. TimeStar Online for clocking in and out of work - it's stupid, since I always use the same PC/account at work, that I can't save the credentials on that site - strangely enough I can on my Android but not on an iPad. Even shared PCs this wouldn't be too bad since clocking in/out for someone else really doesn't do anything but annoy your supervisor. (They have to go in and delete the erroneous punches - just choose not to save on public PCs).

you can also use it like following

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

I solved in another way. You can try this.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){
setTimeout(function(){
$("input#passfld").attr("type","password");
},10);
});




// or in pure javascript
window.onload=function(){
setTimeout(function(){
document.getElementById('passfld').type = 'password';
},10);
}
</script>

#another way

 <script type="text/javascript">
function setAutoCompleteOFF(tm){
if(typeof tm =="undefined"){tm=10;}
try{
var inputs=$(".auto-complete-off,input[autocomplete=off]");
setTimeout(function(){
inputs.each(function(){
var old_value=$(this).attr("value");
var thisobj=$(this);
setTimeout(function(){
thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
thisobj.val(old_value);
},tm);
});
},tm);
}catch(e){}
}
$(function(){
setAutoCompleteOFF();
});
</script>

// you need to add attribute autocomplete="off" or you can add class .auto-complete-off into the input box and enjoy

Example:

  <input id="passfld" type="password" autocomplete="off" />
OR
<input id="passfld" class="auto-complete-off" type="password"  />

I tried the following and it seems that works to any browser:

<input id="passfld" type="text" autocomplete="off" />


<script type="text/javascript">
$(function(){
var passElem = $("input#passfld");
passElem.focus(function() {
passElem.prop("type", "password");
});
});
</script>

This way is much more safer than using timeout techniques, because it guaranties that the input field will yield to password when the user focuses it.

Here's the best answer, and the easiest! Put an extra password field in front of your input field and set the display:none , so that when the browser fills it in, it does it in an input that you don't care about.

Change this:

<input type="password" name="password" size="25" class="input" id="password" value="">

to this:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

In the case of most major browsers, having an input outside of and not connected to any forms whatsoever tricks the browser into thinking there was no submission. In this case, you would have to use pure JS validation for your login and encryption of your passwords would be necessary as well.

Before:

<form action="..."><input type="password"/></form>

After:

<input type="password"/>

I've found the following works on Firefox and Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

All of these are within the forms section. "person" and "mypswd" are what you want, but the browser will save "userid" and "passwd" once, and never again since they don't change. You could eliminate the "person" field if you don't really need it. In that case, all you want is the "mypswd" field, which could change in some way known to the user of your web-page.

The only way I can get firefox, edge, and Internet explorer to turn off autocomplete is to add autocomplete="false" in my form statement like:

  <form action="postingpage.php" autocomplete="false" method="post">

and I have to add the autocomplete="off" to my form input and change the type to text Like:

     <input type="text" autocomplete="off">

It seems that this html code needs to be standardized with the browsers. the form type = password should be revised so that it overrides browser settings. The only issue I have is that I lost my input masking. But on the bright side the annoying "this site is not secure" is not showing up in firefox.

for me, its not a big deal since the user is already authenticated and its my change user name and password portion of it

Read also this answer where he is using this easy solution that works everywhere (see also the fix for Safari mobile):

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Here you go.

seeing as autocomplete=off is deprecated, I suggest a more recent solution.

Set your password field to a normal text field, and mask your input with "discs" using CSS. the code should look like this:

<input type="text" class="myPassword" />


input .myPassword{
text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;
}

Please note that this may not work propely on firefox browsers, and an additional walkaround is needed. Read more about it here :https://stackoverflow.com/a/49304708/5477548.

The solution was taken from this link, but to comply with SO "no-hotlinks" i summarized it here.

you can use this: autocomplete="new-password"

Example:

<input type="password" placeholder="Enter New Password" autocomplete="new-password">