First-off, i'll point out that a public place should be the last place on earth anybody should ever do their online banking. But apparently, people do.
Kenn Christ rounds-up the controversy around using the
autcomplete="off"
attribute on <input ... />
elements: this attribute is not part of the HTML specification. Inserting this attribute in your HTML code makes your document an invalid HTML document.
I'm offering a fairly obvious unobtrusive JavaScript way of setting this attribute:
- to disable autocomplete on one or several text input boxes add the following CSS class attribute value to each one:
class="disableAutoComplete"
so such input tag might look like:<input type="text" class="disableAutoComplete" name="mySocialSecurityNumber" value="111-11-1111"/>
- add the following script block at the bottom of your document, say, right before the </body> tag, inline, or in a separate .js file:
<script language="JavaScript" type="text/javascript">
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName("input");
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
inputElements[i].setAttribute("autocomplete","off");
}//if current input element has the disableAutoComplete class set.
}//loop thru input elements
}//basic DOM-happiness-check
</script> - ...
- let me know if it works ;]
37 comments:
Nice tip there, Chris. Ultimately people should not be doing their banking from public machines. This equates to standing in a crowded room while voicing your bank account information over your cell phone to your bank's customer service department. Unfortunately, it's just a matter of common sense. Still safe-guards are important for sake of the masses and I'm glad to see you coming to the rescue once again! :-)
Ernest: w00t.
Isn't using Javascript to add a non-standard attribute to an element just as bad as including it in the HTML? All this JS does is save face when it comes to validating, basically hiding the non-standard attribute from the validator. If following the standards to the letter is so important, then you shouldn't use non-standard features whether you use them in the HTML or via Javascript.
Paul, agreed, in the end it depends on how much of a purist each developer seeks to be. Setting the non-standard attribute in a script rather than inline HTML keeps your HTML code clean with less clutter for the browser to deal with during the parsing process. To each their own.
This seems like a great idea but it doesnt appear to work for a form entry that needs its own class style to define it. Is there another way this can be done. Possibly in the form tag for the entire form instead of on a per input basis.
... can you gmail me at frenchy so we can look at the issue you're dealing with? maybe some sample HTML. So I can better understand the problem you're facing.
normally, you should be able to go class="someOtherClassName disableAutoComplete" ... and/or vice-versa without breaking my script. All decent browsers support multiple class names. I've seen issues with IE 5 for the Mac, where, if i recall correctly, the last class name was taken into account and the ones before it, ignored.
This is decent but do you have anything that will work for FireFox?
I realize this is a somewhat old article, but can't this be accomplished with no javascript at all? In fact, can't you just put the following attribute into the input tag: autocomplete="off". I've noticed that Google Suggest (http://www.google.com/webhp?complete=1&hl=en) and many bank login pages use this tag to prevent mozilla based browsers (and quite possibly any modern browser) from saving form information.
Hey, guys, does this trick protect from filling the form from other frame using javascript?
this tip does not work !!!
I have tried this in both IE and Firefox and it does not work. I've heard of folks using onLoad to make this work.
Handy Tip. Thanks. Saved my bacon. Seeing as Apache Struts doesn't allow you to add non-standard attributes to input tags.
Thanks for the tip, just what I was looking for! Works fine!
Greetings from The Netherlands
Sigh: that's just as invalid, it is just a trick to get a zero errors count from the validator. The same invalid markup gets inserted into the DOM.
How about adding the following to each input?
onfocus="this.autocomplete=false"
vweng: yup, that should work too.
Actually, if you execute this code after the document loads, it will not take effect for the input element that is focused first. You must blur then refocus it.
works great on all tested browsers... good job
2 years late, i know, however, it would be best if you do this:
<input type="text" id="mytextbox">
and then do this in the javascript:
if(document.getElementById) {
var obj = document.getElementById('mytextbox');
if(obj.setAttribute) obj.setAttribute('autocomplete','off');
}
this way you don't have to set a class to your textbox at all. it is also more cross-browser compatible, and on occassions where this code isn't compatible with the browser, it doesn't trigger an error during javascript execution either.
Thanks Brow... works fine to me .
I was having with strus....
As someone say "Save my bacon"
Thanks allot!
From Brazil!
10/10/2006
Hey Chris, thanks for the tip. I've posted an alternate technique that could be merged with yours to force all fields to be clear, including password fields. - Jason
Hi Chris,
This unfortunately for me, does not work in Firefox 2.0.
Do you have any other idea how to disable this feature? Someone said something about preventDefault, but I'm not sure how to use this for the autocomplete feature...I don't even know if it's possible...
Thanks.
My trick (if you want to put W3 valid html banner):
if(!preg_match("/W3C_Validator/i", $_SERVER[
'HTTP_USER_AGENT'])) echo 'autocomplete="off"';
Works fine!
Thanks...
How to use this
if(!preg_match("/W3C_Validator/i", $_SERVER[
'HTTP_USER_AGENT'])) echo 'autocomplete="off"';
I tried just including in the script but doesn't work for firefox2.0.
Chris
Thank you for this example
Following the same idea i created a function to enable/disable autocomplete given the name of an input object and the 0/1 enable disable option
Here it is:
// Disables/Enables autocomplete attribute to avoid/permit
// auto-completion for input fields in Firefox / IE
function set_autocomplete(name, option)
{
input = document.getElementById(name) ;
if (option == 0) // off
{
input.setAttribute("autocomplete", "off") ;
}
else if (option == 1) // on
{
input.setAttribute("autocomplete", "on") ;
}
}
Best regards,
Fernando Gabrieli
Thanks Great work! Turning off auto complete is also important when you have a specialize auto complete already written in. For example in my real estate site, I have a javascript auto complete that will try to guess the city and state as the user types but I've been told the browser auto complete clashes with my custom one. Google finance also uses auto complete for stock symbols. I think they use some method like this as well.
Thanks
Kevin
Thanks for the tip, just what I was looking for! Works fine!
Greetings from a Frenxh in Lithuania.
Doing this in jQuery looks like:
$("input.disableAutoComplete").attr("autocomplete", "off");
just for anybody who is scrolling this far:
autocomplete attribute will be in the html 5 standard.
Isn't using Javascript to add a non-standard attribute to an element just as bad as including it in the HTML? All this JS does is save face when it comes to validating, basically hiding the non-standard attribute from the validator. If following the standards to the letter is so important, then you shouldn't use non-standard features whether you use them in the HTML or via Javascript.
Fantastic, it works very well. Thanks!!!
For what it's worth, you could also generate a dynamic hash that changes on every page load so "mysecurefield" becomes "mysecurefield_012345ABCD".
The data still exists there, but won't be as obvious to the user (like just pressing the down arrow).
This would just another way to secure the site and probably shouldn't be used all alone.
As far as XHTML validation, I would say the security is more important in this case. For example, I have a very old flashlight that wouldn't that doesn't look nice, but it does its job and lights my way (pretty XHTML vs function).
Besides, now that HTML5 has some buzz, saying "HTML5 Compliant" will not only let you sound cooler, but more importantly will help the web move forward. We wouldn't have been able to dump IE6 if everyone kept supporting it. Ah, IE6...the memories :)
- Ryan Lelek
Post a Comment