Remove Browser Autofill feature - html

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>

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

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.

Autofocus text field on mobile, but no keyboard?

As part of my login and registration forms, if there are errors then it will autofocus the related field. Actually, it not as simple as I thought. Let me try to explain!
Basically, on this project, pages are loaded with AJAX. Forms may include an autofocus attribute. This works great, but on mobile it just shows the cursor without bringing up the keyboard, meaning you still have to tap the input to start typing.
Am I missing something, or do I have to double-up the focussing with something like
document.querySelector("[autofocus]").focus();
// with appropriate verification that the element exists, of coursr
In mobile devices (at least in Apple's Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, and I don't think there is much you can do about it.
http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard

detect when form was submitted with enter

I use this to detect enter:
<input type="submit" name=hiddenbutton value=enter style="display: none">
When this is placed before all other form elements, then I get the appropriate $_REQUEST[hiddenbutton]when enter was used to submit the form.
Except with Chrome and other Webkit-based browsers, which don't activate the first button when enter is pressed.
Is there a way to make it work on all browsers? (preferably with as little JavaScript as possible)
I would recomend adding a focus listener to make sure the user is not justdoing something completely different like typing in a word document, because some browsers will detect key clicks without focus

Checkbox Stays Checked on Page Refresh

This a pretty simple question (I assume). Probably a repost, but I couldn't find the answer here... so here we go.
I have a checkbox on a page that I want to default to "unchecked" (unless I specify otherwise in my php).
When I refresh the page, if the box was checked, it will stay checked which is no-bueno because checking the box adds a dom element to my page via a function attached to the box. So the problem is if I refresh, the box is still checked, but the dom element doesn't exist (because I haven't fired the function and I don't want to unless the user checks the check box) but the box is ALREADY checked and I end up in opposite land where UN checking the box creates my dom element and checking it removes it.
Basically, the question is...
Is there a way to default a checkbox to unchecked without javascript?
BTW I haven't checked (no pun intended) in any browsers other than FF 3.5.10
See http://weblogs.mozillazine.org/gerv/archives/2006/10/firefox_reload_behaviour.html
(first comment):
It’s done that way on purpose so if you tap the refresh button you
don’t lose your work. There’s an entry in Bugzilla somewhere that’s
been WONTFIXed asking for a regular refresh to always reset the form
entirely. Basically it’s a backwards-compatibility thing — every
browser since NS1.0 (maybe even Mosiac) has done that.
Dynamically-generated pages don’t even reset themselves, though if the
expiration is set to 0 and you hit the back button it will give you a
fresh form. Also, if the form itself changes (add or remove elements,
change the action, etc.) the for will reset on a reload. I haven’t
tested it, but setting the form name to something random (assuming you
don’t need the name for JS access) might just work. Like ”> in PHP.
As you said, forcing a refresh clears the form, and resetting it does
too. Would something like do
what you want (again, not tested)?
this works for ie
autocomplete="off"
Sure:
document.getElementById('my_checkbox').checked = false;
Oops, I missed the part about no JS. As far as I know, Firefox retains page state on refresh, so I guess there's no other way.
In fact, you just have to add the <form> tag with attribute autocomplete="off":
<form autocomplete="off">
<label for="checkbox">
<input type="checkbox" id="checkbox">
</label>
</form>
You can use the parameter autocomplete="off" directly on the input tag