I have an existing asp.net mvc web application which I would like to stop browsers from auto remembering passwords for next time. Can I do this without needing to change the input autocomplete="off" on the password as whilst I can see this should resolve future ones any one who has already done this action can probably still login as the password is cached.
Indeed autocomplete="off" will do the trick. You'll see it being used here in SO as well (top right):
<input style="display: inline-block; width: 188px; max-width: 188px;" name="q" placeholder="search" value="" tabindex="1" autocomplete="off" maxlength="240" type="text">
You can add it to your input using Razor:
#Html.TextBoxFor(model => model.Input, new { autocomplete="off" })
You can also target all of them at once with jQuery:
$(document).ready(function() {
$("input:text, form").attr("autocomplete", "off");
})
For the caching part, have a look at this excerpt from "How to Turn Off Form Autocompletion" (MDN) (the whole document is worth a read):
Setting autocomplete="off" here has two effects:
it stops the browser saving field data for later autocompletion on similar forms though heuristics that vary by browser.
it stops the browser caching form data in session history. When form data is cached in session history, the information the user has
filled in will be visible after the user has submitted the form and
clicked on the Back button to go back to the original form page.
In some case, the browser will keep suggesting autocompletion values
even if the autocomplete attribute is set to off. This unexpected
behavior can be quite puzzling for developers. The trick to really
force the no-completion is to assign a random string to the attribute
like so :
autocomplete="nope"
Since this random value is not a valid one, the browser will give up.
You should also check if this behavior is consistent between all major browsers (depending on what browser support you are after).
Update: Michael Liu has noted in the comments that "Modern browsers ignore the autocomplete attribute on password fields", in which case I am not aware of a legitimate solution.
You could try placing an additional input field of type password on top of your actual one and set it to hidden, the browser should attempt to autocomplete that instead:
<!-- before your actual password field -->
<input style="display: none;" type="password" name="pwdplaceholder"/>
...it is however messing with browser behavior which is not best practice.
Also have a look at another SO question (shared by Michael Liu in the comments).
You can try using this (Preventing autofilling with autocomplete="new-password"):
autocomplete = "new-password"
For example:
#Html.PasswordFor(m => m.NewPassword, new { #class = "form-control", autocomplete = "new-password" })
And this is the Browser Compatibility:
Related
hCaptcha is a fairly popular captcha solution (see a demo.
Their systems works roughly like this:
Websites add a div to a form with a sitekey and also add hCaptcha's JavaScript
hCaptcha adds an iframe and 2 textareas to the form.
When a visitor solves the hCaptcha, the two textareas are filled with a token that is submitted to the site
The site can send the token in a server-to-server call to verify the user passed the captcha
The texteares added in step 2 look like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style=""></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style=""></textarea>
According to the pa11y these textareas are not accessible. Screen readers need to know that these form elements are not meant for human input, but are instead just for the functioning of the site. I believe one solution could be to add the HTML attribute aria-hidden="true" to both of these textarea elements.
Is there any solution that consumers of hCaptcha can do? Or what would the best thing for hCaptcha be?
Because these textareas are only used by hCaptcha and not meant to be interacted with by the user, they should be hidden. By using display: none on each textarea, hCaptcha will still be able to include the hidden token in the form submission without causing the accessibility issue.
It's not clear what framework you're using, but the output should look something like this:
<textarea id="h-captcha-response-0da5o6pd30l5" name="h-captcha-response" style="display: none;"></textarea>
<textarea id="g-recaptcha-response-0da5o6pd30l5" name="g-recaptcha-response" style="display: none;"></textarea>
This is happening on an asp.net webforms application, using Chrome Version 72.0.3626.109 (Official Build) (64-bit).
The site is password-protected. The user logs in with a username and password. After a successful login the user is redirected to the "Loan Search" page. The Loan Search page contains a handful of text inputs.
The problem is Chrome will autofill my username into one of the text inputs (see image). "tregan" is the username I entered into the login page.
Chrome always selects this particular text input to autofill the username ("Contact Mailing Address"). This is happening to myself and several dozen other users of our web site.
Any idea why Chrome is doing this autofill, and is there anything I can do to prevent it? I cleared my Chrome autofill cache, but that did not fix the problem.
The answer is to add an invisible text input to the asp.net form called "username".
Several years ago we were having the same problem with a different input. The answer was to add an invisible input of type "password", as explained in this SO answer, scroll down to the phrase "It is so simple and tricky...":
Disabling Chrome Autofill
Below is the complete fix, I added these two elements inside the form element in our site's master page. Per #Jeff_Mergler's comment below, put these inputs at the top of your form tag:
<input type="text" id="username" style="width:0;height:0;visibility:hidden;position:absolute;left:0;top:0" />
<input type="password" style="width:0;height:0;visibility:hidden;position:absolute;left:0;top:0" />
Some more ways to try to workaround this:
Add autocomplete="off" to the <form> and/or to the <input>
Change the field's name/id
to something that does not have "name" or "user" in it
If it is not already inside <form> wrap the element with empty <form> tag
Randomize the name attribute of the input, or use data-name instead of name. You'll have to change the code that process the data accordingly.
Also I think it'll help to report this issue to Google via ⋮→Help→Report an issue (or Alt+Shift+I) to encourage them to fix these issues.
I was facing the same issue, i found a fix by wrapping my div inside a form tag and added a property autocomplete="off" in the form tag.
......
.....
Same here. This needs to be resolved by chrome. This is just dumb to have to add tags around textboxes. Also, quick tip to anyone needing to add form tag without having to re-do your CSS. Add "display:contents;" to the form. It will act as if its not even there.
Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.
I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first.
I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):
HTML:
<form id="signup" method="post" action="">
<p id="errors" role="alert" aria-live="assertive"></p>
<p>
<label for="first">First Name (required)</label>
<input type="text" id="first">
</p>
<p>
<input type="submit" id="button" value="Submit">
</p>
</form>
JS:
$('#signup').submit(function () {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('Please enter your first name.');
}
return false;
});
Here validation does not reload page, and the "alert" area is dynamically modified.
In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?
I think there's a simple solution, but you'll have to say if it covers your cases.
I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.
For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.
If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:
$('#errors').append('Please enter your first name.');
// Make the error message focusable, but not in the default tab-order:
$('#errors').attr('tabindex', '-1').css('outline', '0');
// Set the focus on the (first) error message:
$('#errors').focus();
JSFiddle updated here.
A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:
Displaying error messages
Accessible form validation.
I notice this as a frequent problem on many wbesites, even those of large corporations, so as a web developer applying for jobs, I think, I should know how to fix this.
Basically, for example, a username field will say "Username" until you click it to type in your username, at which time it should clear itself of the text "Username." But in most cases, it doesn't, and you end up typing in the middle of that pre-existing text.
I've looked this up, and the best solution I found was a 30+ line set of Javascript functions which did exactly what you'd expect: set up a system that clears the default value away when a user clicks on the field, and also puts it back when they click away so long as they hadn't entered anything.
But that's not really what I was looking for, because I already knew how to do that.
I feel like by now, with HTML5 and all, there should be a simpler fix to this. And not just a reduction of the JavaScript to a shorter jQuery script. I mean more of an embedded, inherent fix.
Does anyone know of any ways to stop this phenomenon from happening?
Simply use HTML5 placeholder attribute
<input type="text" placeholder="Whatever" />
Fiddle
Cross Browser Info :
Some Firefox versions clear the placeholder text on click of text box and Chrome clears it after the user starts typing, but later version of Firefox acts like chrome, it clears the placeholder text as the user starts typing in the input box.
You can use the HTML5 placeholder attribute http://www.w3schools.com/html5/att_input_placeholder.asp
Modern browsers now support the placeholder attribute for forms, which let you do just what your asking
Check out
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
For a article using modenizr for cross browser compatibility
just use the HTML5 placeholder attribute.
<input type="text" placeholder="Username" />
This will obviosuly not be completely cross browser compatible so for that you will still need the old Javascript / jQuery fixes.
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.