Safari 11 Mac disable autofill - html

I made some research but can't find how to remove the autofill on input fields in Safari 11.0.2 (tested on Mac).
I have a large form with placeholders that looks like "Car name" or "Pet name", etc... Safari see the word name in the placeholder and launch an autocomplete/autofill that overlap my custom html autocomplete from an API.
I understand it can be a feature in some case but on other it break the UI. Is there a valid solution to stop this ? All this solutions doesn't work :
autocomplete="off" on form
autocomplete="off" on input
autocomplete="false" on input
hidding with css like here https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers
Thanks

Related

How do I stop "Type '/' from your saved info" (on Edge) from appearing on my site's search field?

I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input field. How can I disable this menu from appearing on just this input field of my site?
Based on the image you provided, I think this should be caused by some default settings in Edge. If you want to turn off this prompt, just navigate to: edge://settings/personalinfo in Edge and disable this feature like this image below:
I had today the same problem. I had input field without label and empty placeholder. Setting placeholder"..." and making the placeholder transparent makes that edge does not anymore offer "type / ..."
Hth
I believe what you're looking for is:
spellcheck="false" autocomplete="off" aria-autocomplete="none"
The aria-autocomplete seems to prevent that box from popping up and the spellcheck seems to also stop the spell checker one from displaying.
There are places where autocomplete and spellcheck would come in handy, but NOT in single-line fields like email, website, or an <input> where I have my own Bootstrap dropdown-menu/dropdown-item list that displays retrieved DB records via AJAX as the user types (in this case, the Edge popups were ovelaying my DropDown list).
Anyway, adding this code to the <input class="whatever" id="whatever" spellcheck="false" autocomplete="off" aria-autocomplete="none" placeholder="whatever" value="whatever" > seems to solve the issue and you don't have to get all your users to change the browser attributes or mess with the placeholder. Hope this helps... :)

How does chrome detect login text boxes?

I have a textBox, that is supposed to get an url from an user.
Unfortunately, chrome autofills it with saved login name.
I would like to understand how chrome detects login input? How can I stop chrome filling this textbox?
My textbox does not have 'login' in Id or name. I could set autocomplete="off" or autocomplete = "false" for the input but I do not think it solves the problem. Tomorrow another textbox may be treated as login and I will have to redeploy code again. I need to prevent chrome thinking the input is a login textbox.
Instead of autocomplete="off" use autocomplete="false"
Setting the autocomplete attribute to "off" does not disable Chrome autofill in more recent versions of Chrome.

Chrome is autofilling my select2 input with its placeholder

I'm currently experiencing a very annoying problem with Google Chrome. I have some filters that are a multi-select and when I click to type on those filters, chrome suggests as an autofill option the placeholder for that select. I've never typed that text on this field, Chrome is getting that from the placeholder of the input.
Also, it seems that Google saved that placeholder as a "suggestion" to fill data on forms.
I've already tried to set those fields as autocomplete="off" and autocomplete="new-password and it did not work.
If I disable Chrome Option to autofill addresses, phone numbers and etc, this problem goes away.
I would like to be able to suppress chrome from suggesting this since it does not make any sense and makes using the filter a pain. I'm not sure if this is a chrome bug, a bug with select2, a combination of both. I've been looking everywhere on the internet to a solution and could not find one, does anybody know how to solve this?
To turn off the auto suggestions which are displayed in chrome try adding
<input autocomplete="off">
Even after adding this if chrome tries to give you auto suggestion, the most widely used technique is to add an hidden input field above your field to solve this problem
<input style="display:none" type="password" name="pass"/>
Adding this above input must solve the problem
Try to add another select2 with display="none", visibility="hidden" and autocomplete="off" before that one and see if the problem goes away.
Had this issue with a password input a while ago and that did the trick.

Autocomplete not working again

Trying to disable the autocomplete in Chrome for Credit Card and CVV input fields, but still no luck after trying few solutions listed below :-
autocomplete="off"
autocomplete="false"
autocomplete="nofill"
autocomplete="cc-name" and autocomplete="cc-cvv"
create a dummy password field before the form, or even before and after the CVV field
autocomplete on the and
None of the above works in disabling the autocomplete in Chrome. Haven't tested any of it in other browsers yet.
Any of you know what kind of trick I can try on?

Autocomplete search issue with Chrome in Bootstrap 3

I have working search field which brings data from database, it has autocomplete as well. It is working fine in firefox but there is an issue in chrome.
When i start typing in firefox example: John Anthony Doe, i can write Doe and it will bring up John Anthony Doe or any data with Doe in it but in Chrome it is only bringing data if i start with with first letters i.e John.
Any idea how can I fix it? Is there a setting in chrome which i have to do?
Appreciate the help.
I created a simple form and ran it in both, chrome and firefox.
<form method="post" action="#">
<input type="text" name="testText" />
<input type="submit" />
</form>
And the result was same as you mentioned.
So basically, displaying the auto-complete is browser based and there is no such setting to change the way it searches from the previous inputs. Firefox searches wildcards like %text% while chrome like text%. That's a built in feature.
For IE :
The Internet Explorer AutoComplete feature can be enabled and disabled by following the steps below.
Open Microsoft Internet Explorer.
Click Tools and then Internet Options.
In the Internet Options window click the Content tab.
Click the AutoComplete button.
Check form.
But again, IE also behaves like chrome for your case
To solve this manually, you can create your own auto-complete :
By fetching data from db using AJAX as the user types the text, search the text however you want in db (%text% or text%).
Then populate the datalist for that text box with the fetched values.