How does chrome detect login text boxes? - html

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.

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... :)

Remove Browser Autofill feature

I need to remove the browser's autofill/suggestion feature.
This autofill is disabled using autocomplete="off" in Textfield component. once I do that this brings browser's auto fill feature
In Edge, If I turn off the "Save and fill the personal info" option in "Settings/Profile/Personal info" the above suggestion is not shown. Is there any way without turning off that setting I can remove the autofill feature using Material UI TextField property or CSS property "input:-webkit-autofill"
If autocomplete fails to work, most likely it's a bug or for some reason, react is preventing the attribute from being modified.
However, I know a simple way to bypass by changing the type attribute to something random, where the browser can't understand what it should ask from the user and therefore, the browser can't prompt an autofill.
For example on a standard HTML input tag:
<input type="inputText"/>
This will still treat it as an input field, however, it will not attempt to autofill.
Its browser functionality which you cant handle from code level. If you want to prevent it than you have to made setting changes in browser
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on Settings.
In the "Autofill" section, expand the area for which you wish to disable Autofill.
Toggle the setting OFF if it is on. The system will automatically save your settings.
More details found here => https://support.iclasspro.com/hc/en-us/articles/218569268-How-Do-I-Disable-or-Clear-AutoFill-AutoComplete-Information-
So for html you can simply put autocomplete="new-password" in your
Auto-complete="off" can also be used nut it has some drawbacks.
Banks and other security institutes turn auto complete off .Problem is user change frequently their passwords and fields and use simple passwords to remeber.So auto complete is good feature in these cases.
But you can try this solution if you want .I hope it will work fine
<input type="password" autocomplete="new-password">
you can add autocomplete="off" to your form or input but many modern browsers do not support autocomplete="off" for login fields
but you can prevent it using autocomplete="new-password"
Preventing autofilling with autocomplete="new-password"
for more information check this link
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields
Its most likely a bug, the solution I've found works best is to have auto-complete have a hard coded random value which will prevent a user from using auto-complete...
Try this:
<input type='password' name='pass' autocomplete='password' />
In terms of the auto-complete value you can have anything you want there.
New edit:
<script>
// Execute this code when page is
// totally loaded
$(document).ready(function () {
/* Setting the autocomplete of
input field to off to make
autofill to disable */
$("#name").prop("autocomplete", "off");
});
</script>

Chrome 72 disabling the manage passwords dialog when you click on a textbox

I tried autocomplete= off, false.
autofill= off, false.
Both on the html element level and form level.
I tried changing the name of the textbox to something random like zxccvcvb.
I tried adding a hidden element with the same name or an empty image before the textbox.
I was able to stop autofilling by adding readonly attribute and removing it on onfocus event and it worked fine but I still get that manage password dialog when I click on the textbox.
There are many textboxes on my page and this happens only with 2 of them.
Any more ideas that I can try?
And we can't ask clients to turn off their autocomplete from Chrome settings.
Thanks.

Button is auto disabled , gets enabled after a click

I am working with angular TD forms. There is a form field and a submit button. The button should be disabled only if there is no values in the form. Meanwhile, chrome saves the form fields value (Username and password saving in chrome), so there are still values in the form field.But the button is disabled . But it gets enabled after clicking anywhere in the web page. How to prevent this?
The following link explained the problem in jquery. How to do the same thing in angular 7?
Enable button when browser fills data automatically
Disable the autocomplete from your form as
<form action="/..." autocomplete="off">
for more info you can refer to Disabling Chrome Autofill

Chrome Autocomplete - Remove background style when record saved

Is it possible to force Chrome to remove the autocomplete background style for a text input once the record has been saved?
<input type="text" id="fltrName" class="form-control" ng-model="calEvtFilter.name" />
When a user types an entry that has previously been used then saves the record the autocomplete style remains. The only way I can remove the style at the moment is to reset the form then populate the angularJS model with the data again?
Hi you can remove the autofill settings from your Chrome Setting
Go to Chrome Settings -> Click on Show Advanced Setting
Uncheck Enable Autofill to fill out web forms in a single click under Passwords and Forms
Close the chrome and open again