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 want to make it possible for visitors of my website to add fraction in a input text field.
So if they push the '/' or a specific button on my website, in the text field a fraction line should popup and a number can be added in the numerator and denominator.
The same I would do for the exponent, when push the '^' or a specific button.
[edit] Maybe my question wasn't clear. I tried to create it myself, but I have really no idea how to start. I can create it in two separated fields, but I want the visitor to choose if he has to add a fraction.
I saw the solution in a flash website, but I thought with the introduction of html 5, flash would disappear.
This is the best solution i can come up. I dont really know how you would make a fraction like this in an input field.
Hope it helps
$('#input-main').change(function(){
$('.main').html($('#input-main').val());
})
$('#input-denom').change(function(){
$('.denom').html($('#input-denom').val());
})
$('#input-num').change(function(){
$('.num').html($('#input-num').val());
})
p {display: inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable for="input-main">Number</lable>
<input id="input-main" type="text" value="">
<lable for="input-num">Numerator</lable>
<input id="input-num" type="text" value="">
<lable for="input-denom">Denominator</lable>
<input id="input-denom" type="text" value="">
<p class="main" >1</p><sup class="num">1</sup>⁄<sub class="denom">2</sub>
I have a form in html (generated in php), which contains also a text field.
To submit the form I use a submit button and the results appear on the left side of the page. Now, I would like to add another button which would clean the text in the text field
and resubmit the form (with value="" in the text field). Do you have any idea how to do it?
Simple <input type="reset"> does not submit the form.
your button should be like this:
<input type="button" onclick="DeleteText();" value="Delete text" />
and your javascript code:
function DeleteText() {
document.getElementById('my_text_input_id').value = '';
document.getElementById('my_form_id').submit();
}
suppose the text box has id="myText" and the new button has id="clearBtn", and the form has id=myForm. You can do the following:
$(#clearBtn).on("click",function() {
$('#myText').val("");
document.forms["myForm"].submit();
})
This is untested, but proposes an idea. Also, This is a jquery solution, which I recommend over pure javascript in most cases.
HTML5 brings us the "placeholder" attribute, which allows for a Pure CSS implementation of this.
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
I have successfully used Shidhin's solution, found here:
http://codepen.io/shidhincr/pen/ICLBD
I have the following codes, its part of the application I am building for iPhone/android phones.
<li><span>X</span><input type="text" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number""/></li>
<li><span>X</span><input type="text" id="bname" placeholder="Beneficiary Name" /></li>
the "X" between the spans is suppose to appear when on a keyboard a button is pressed. after the "x" has appeared the user can remove the entire text in that field by pressing on the "x". when there is no element in the field at all, the "x" is not visible. But i cant make it happen.
I am using webapp-net. I would be glad if some could help me with this.
I'm not either quite familiar with WebApp.Net, but you might consider on using a form and a reset button, such as:
<input type="button" value="X" onClick="this.form.reset()" />
or something like:
<input type="reset" value="X">
inside of a <form> with the rest text inputs, and having in mind an html-like enviroment (even thought this might not clear a radio/checkbox inputs).
If I haven't got you wrong, you might also consider on looking if there is something like placeholders for textareas and/or text inputs on that framework. Good luck.
I have never seen this, have no idea what is going on:
<form action="/cgi-bin/Lib.exe" method=POST name="slider" ID="Form2">
<input type="text" name="user" value="" ID="Text1">
<input type="text" name="end" value="" ID="Text2">
</form>
function setval()
{
alert(s.getValue());
alert(s2.getValue());
document.slider.user.value = s.getValue();//set value of hidden text box to value of slider
document.slider.end.value = s2.getValue();//set value of hidden text box to value of slider
document.slider.submit();
}
When submitting form from setval(), when I change the name of the first input box from "user" to anything else, my cgi application won't except it and I get an error? I can change the name of the secons input box to anyting and it doesn't seem to have any problem? Confused. Thanks!
Seems more like it's a problem with the cgi than it is with the HTML/Javascript, to me. It probably makes the assumption that a value for "user" will always be sent. Not much else I can tell you without seeing the form-processing code.
Your CGI must be expecting an element called 'user'. You would need to check the source.