Demo link:
http://elevation-inc.com/dev/test/ieform/
In IE 6/7/8 - if you enter a term into a simple input field, submit the form and then hit the back button - the input field retains the previously submitted term. If you then refresh the page, the value is also retained.
How, via HTML, can this pre-population be disabled? We want no value to be in the input box on page load/domready.
We've already tried autocomplete='off' on both the form and input element, but the pre-population is still persisting.
Thanks in advance.
<input type="text" name="userid" autocomplete="off" /> works fine for me (the same goes with your form). Make sure you reload the page in between testing (CTRL + F5 for full refresh).
This is how IE works, but you can change the value with JavaScript
<body onload="document.getElementById('q').value = '';">
<form action="http://www.google.com/search" name="f" autocomplete="off">
<input type="text" name="q" autocomplete="off" id="q"><input type="submit">
</form>
Well I guess it's a browser behaviour you can't bypass by html. You can do it in javascript however:
<script>
window.onload = function() { document.forms.f.q.value = ""; };
</script>
or if you don't want to wait for images to load (because window.onload will wait for that),
you can use the document ready event, as described here. (it needs more tweaking to make it work across all browsers)
Related
I've stumbled across this issue a couple of times in the last while, where Chrome ignores autocomplete="false" and autocomplete="off". It will now even ignore autocomplete="whatever" or anything you do to trick it, if someone has submitted a form with that random "hack" in it before.
In trying to solve this issue, I came across this StackOverflow question, which doesn't solve the problem if you've submitted a form containing this field before.
EDIT: This is NOT for password fields.
I had this issue with a field that has "number" in the name and this triggering the CreditCard Autocomplete Dialog. This solution helped me get rid of it.
Even though this is not the intended use of the option, I think this is unlikely to break and works without JavaScript Hacks. A one time code won't trigger an autocomplete so I treat the fields that are not supposed to autocomplete as one time codes.
<input type="text" name="number" autocomplete="one-time-code" />
This did the trick for me. I tested it in Chrome 87.0.4280.141 and it works fine.
autocomplete="new-password" and set placeholder attribute with some text works for me.
<input name="name1" placeholder="Nº" type="text" autocomplete="new-password" />
Everytime I found a solution Chrome throws a spanner in the works again.
No longer working
autocomplete="new-*"
add an offscreen positioned bogus input element style="position: fixed;top:-100px;left:-100px;" as first <form> element
set <form autocomplete="off">
use <textarea> and style it as a field
Working solution (15 jul 2021)
Append a dummy <input> without a name attribute and make the original <input> type="hidden"
HTML
<input type="hidden" name="myfield" class="no-autofill"> <input>
Note that any events, (click, blur, focus) that show your custom
autofill should be added to the visible <input> element.
Then add a change event to sync the value to the hidden input.
const fields = document.querySelectorAll('input.no-autofill');
for (const field of fields) {
const dummy = field.nextElementSibling;
dummy.addEventListener('change',e => {
field.value = e.target.value;
});
}
Ow, before implementing. Make sure you visit the Chromium bug tracker
and tell the Chrome Developers why following the standard is important. So one day we might be able to just use:
<input name="myfield" autocomplete="off">
its work in my local machine try it...
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;">
It's November 2021, and none of the non-javascript solutions mentioned worked for my address-related field. What did work was actually changing the text in the label.
The Autocomplete dialog in Chrome was shown if:
The word "Address" is in the label at the start or end; and
There are at least two other address fields (seemingly anywhere in the page)
EDIT: If you put a zero-width joiner character entity in the middle of the word 'Address' in the label, the autocomplete dialog is suppressed!
i.e. set the label to Address
html, body {
font-family: 'Helvetica', Sans-Serif;
font-weight: 200;
line-height: 1.5em;
padding: 1em;
}
<div class="addressDiv">
<div>
<label>Focus on this field...Address</label>
<div>
<input autocomplete="off" type="text" aria-autocomplete="none" autocapitalize="none" />
</div>
</div>
<div>
<label>State</label>
<div>
<input autocomplete="address-level1" type="text" value="">
</div>
</div>
<div>
<label>City</label>
<div>
<input autocomplete="address-level2" type="text" value="">
</div>
</div>
</div>
<p>
See this JSFiddle
</p>
Read the note at the bottom before using this method
After struggling for a long time, I made it work reliably this way:
It is important that your input type is 'text'!!
define a css class
input.hidden-password {
-webkit-text-security: disc;
}
Then in your form, set autocomplete off, input types = 'text' and add the class to the input.
<form autocomplete="off">
<input
type = "text" // <----This is important
class = "hidden-password"
/>
</form>
C'mon Google, let us take control over our inputs! My client requires passwords to be changed very often and auto fill IS A BIG NO NO!
IMPORTANT NOTE Do not use this for login or any other place where security is required. I used this for a form within my app where the user was already authenticated and security was not required.
For Me, the problem only occurs, if I have multiple fields with the same value for autocomplete. If I set the value to a random number (Math.random()), no autocomplete is happening. I think it would also be possible to use an otherwise unique string.
To prevent 'manage addresses' level of of chrome popup: autocomplete='chrome-off'
To prevent autosuggest popup, if you can swing it: EXCLUDE name and id attributes.
Try to make your input readonly, enable it after focus
<input readonly="readonly" onfocus="this.removeAttribute('readonly');" type="text" value="test">
here is JS solution that works at this point in time for me:
<input name="name" type="text"
onfocus="this.__name = this.getAttribute('name'); this.removeAttribute('name')"
onblur="this.setAttribute('name',this.__name)"
>
The above js code stores input name to this.__name and removes the name onfocus later onblur name is restored so forms can work as expected, but chrome does not autofill.
No known attribute value is working in form tag. I have tried them all: do-not-show-ac, chrome-off, new-password, off...
The only way i found is by adding autocomplete='new-password' to every input component. To do it globaly, i am using this jquery:
<script>
$('input').attr('autocomplete', 'new-password');
</script>
The best way is to use JavaScript to skip browser's behavior, disableautofill.js does this.
You can try https://github.com/terrylinooo/disableautofill.js
<script src="https://cdn.jsdelivr.net/npm/disableautofill#2.0.0/dist/disableautofill.min.js"></script>
Usage:
var daf = new disableautofill({
'form': '#testForm', // Form id
'fields': [
'.test-pass', // password
'.test-pass2' // confirm password
],
'debug': true,
'callback': function() {
return checkForm(); // Form validator
}
});
daf.init();
How about just never submit the form? Nothing to remember!
Your app probably doesn't work without javascript anyway, right?
In fact, don't use a form at all, just collect the input values, serialize and do an ajax call.
$('#mybutton').on('click', function (e) {
$.ajax({
type: "POST",
url: 'mybackend',
data: $('#formdiv input').serialize(),
success: function (data) ...
Mind you, this is not a well tested idea, just something I have observed when I wanted autofill, and which I have not seen suggested in any of the many threads dealing with this issue.
I just resolved a related issue - it was forcing Chrome Autofill on an address field (Google Places Autocomplete, specifically) and no other solutions were working.
Eventually, we changed the nearest label to it from saying "Business Address" to being blank and set its text via CSS
#gmapsSearchLabel:after {
content: "Business Address";
}
And without a nearby label "saying" address, it stopped forcing Autofill.
A solution that works for me is to place a zero-width-white-space character into the placeholder text, so for example:
placeholder="Enter your address" becomes
placeholder="Enter your a[ZWSP]ddress"
Chrome is then unable to find "address" and skips autocomplete suggestions.
You can copy the character ( don't use the html entity etc. ) over at CSS Tricks. Here is the word "address" with the ZWSP character after the letter "a":
address
Dirty answer ,
edit "selectorForYourInputs" and works just fine, cross browser tested, max overhead 50ms, user never notice any performance lag:
counter = 0;
emptySearchboxInterval = setInterval(() => {
$(selectorForYourInputs).val("");
counter++;
counter == 100 ? clearInterval(emptySearchboxInterval) : null;
}, 20);
I have built a textbox dropdown AngularJS component which works great in Chrome, Firefox, Safari and Internet Explorer.
A feature of this component is that you type in a string, and then can use the up/down arrow keys to scroll through suggestions.
In Microsoft Edge, as soon as you hit the down arrow, the following text is added to the input box:
briefly explain your changes (corrected spelling, fixed grammar, improved formatting)
Is there anything I can do client side to stop this from happening?
<form>
<input type="text" />
</form>
To demonstrate this, run the above snipper, type something into the textbox and hit the down arrow twice on Edge. I want this to not happen, as it is breaking my autocomplete!
Thanks
If I understand correctly, you are having an issue with the autocomplete feature. Simple add "autocomplete='off'" to your input and that should disable the feature.
<input type="text" autocomplete="off"/>
Unfortunately, none of the above suggestions worked for me in latest Edge. However, this solution does:
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
This forces Edge to find a data lookup list called autocompleteOff which doesn't exist. Works a treat for me.
Added advantage is that it's pure HTML, no CSS or JS required.
2021 update:
Another solution which works very well for me is to add the readonly attribute to the field and then remove the tag using JQuery after a short delay of a few ms. The readonly attributes causes Edge (and others) to ignore the field.
For anyone experiencing autofill ignoring the autocomplete="off" on Edge 105+, you can use aria-autocomplete="none" alongside, which will prevent autofill from showing up (Tested in macOS 12.5 but should work in other platforms)
From Mozilla:
You can set the autocomplete on the actual form tag <form autocomplete='off' ... >...</form> which will work for the entire form, or on individual <input type='text' /> tags.
In my experience on IE 11 and Edge putting it on the form works but individual tags does not work. I tried testing on Chrome but the fields were already not autocompleting.
Please read the full Article for more detailed information.
NOTE
Most browsers disregard this for login fields.
if you want to remove autocomplete at the input in chrome when you use autocomplete="off" also you must remove id, if you don't remove id on your input, autocomplete will not work!
simple example:
<input type="text" autocomplete="off" list="autocompleteOff"
name="fieldname" placeholder="Placeholder here" />
you can handle your input with name ;) , that work for me fine.
<input type="text" autocomplete="new-password" />
If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"
MDN reference
It works also for non-password fields.
if you need it app/site-wide you can use jquery:
$('input').attr('autocomplete','off');
Or if you're like me and using Angular+ui-router you might try the following:
In your index.html add the following script:
<script type="text/javascript">
setTimeout(function() {
$('input').attr('autocomplete', 'off');
}, 2000);
</script>
Then to cover state changes, add the following to your root controller:
$rootScope.$on('$stateChangeStart', function() {
$timeout(function () {
$('input').attr('autocomplete', 'off');
}, 2000);
});
The timeouts are for the html to render before applying the jquery.
If you find a better solution please let me know.
This worked for Edge & Chrome (not a login form tho, not sure if that makes a difference)
autocomplete="somerandomstring"
https://gist.github.com/niksumeiko/360164708c3b326bd1c8#gistcomment-2367048
Just autocomplete="off" list="autocompleteOff" in your input and work done !
autocomplete="off" doesn't work since yesterday (edge 105.0.1343.25).
Looks like a bug to me. Hopefully, they will fix it soon.
in edge worked for me
`autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" /
`according to this https://stackoverflow.com/a/30344707/14913109
I have a form within an html page that has the action set to another html page. Within Chrome, FF, and Safari, when I click on the first html page's Go button, I am taken to the second page with the URL containing the query string.
All browsers, with the exception of IE, show the query string in the URL when I submit the form.
How can I make the form submission show the query string in IE when working with local html files? Any help would be appreciated.
HTML Form
<form method="Get" action="destination.html">
<input type="hidden" value="test" name="name" />
<input type="submit" value="Go"/>
</form>
This answer uses jQuery/JavaScript, which may or may not be a little much for the simplicity of what you're trying to do, but if you already have jQuery on the page it's not too hard to try this methodology:
In your HTML <input>, add an Id.
<input type="hidden" id="field" name="field" value="showthis" />
In your script tags, try this:
$(document).ready(function() {
$('#submit-text').click(function () {
var field = $('#myField').val();
window.location.replace('destination.html?field=' + field);
});
});
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
I had designed an HTML form with submit button. But instead of submit it to another page I want to submit to pop up windows where I can limit the size of the pop up windows say "320x240" hide all the toolbar, disable resize.
Here's my go at it; this JavaScript snippet should go into the head of your page:
<script>
process = function()
{
window.open('about:blank', 'popup', 'width=320,height=240,resizeable=no');
document.login.setAttribute('target', 'popup');
document.login.setAttribute('onsubmit', '');
document.login.submit();
};
</script>
And this is a sample form for demonstration purposes:
<form action="handle.html" method="get" name="login" onsubmit="process(); return false;">
Username: <input type="text" name="username" id="username" /><br />
<input type="submit" />
</form>
Now, here's what's happening: first, we set up a form and give it an onsubmit attribute that tells it to run the function process() and return false; instead of submitting normally; from this point, that function takes over and creates a popup window, giving it a name, and some features (by all means, add any surplus ones you'd like), and then attention comes back to the form, where we now set the target attribute to the name of the window we just created.
We then have to clear that onsubmit that we set earlier, or this same exact thing will happen again, and that's certainly not what you want. Finally, we just have the form submitted again and it now passes all of its information to the popped window; from there, it's just getting handle.html (or whatever you end up calling your processing page) to do its work with the data.
Hope I've helped.