I have a form, with some simple input fields. In some of them the 1Password Extension gets triggered and the popup shows up.
And in some cases the popup does not get triggered.
I can't find any reason why it would trigger on these specific input fields.
HTML of Input where 1Password gets triggered.
<div class="col">
<mat-form-field appearance="fill" class="form-mat-field mt-1 mx-auto">
<mat-label class="form-control-label"
jhiTranslate="bringCockpitApp.sponsoredProduct.fadeoutIconId">
Fadeout Icon Key
</mat-label>
<input formControlName="fadeoutIconId" matInput name="fadeoutIconId"
placeholder="Bier"
</mat-form-field>
</div>
Any idea, why this is happening? and how to disable it?
put data-1p-ignore as an attribute in your field to get 1Password to ignore the field.
<input type="text" id="username" name="ig" data-1p-ignore>
Source: https://developer.1password.com/docs/web/compatible-website-design
my Solution which seemed to work, was to set the input type to "URL".
honestly I don't know why that worked, Tel worked too but that won't help a mobile user.
the Search option also removed the icon but left an X button. the 'URL' type removed both.
Hope this helps.
Related
Microsoft Edge is displaying an annoying pop-out with the text "results from saved info" when I start typing something (e.g. 'te') into the input. I want to hide this (for all users) so I have set autocomplete=off but I still see this annoying box. I've also tried list="autocompleteOff" and disabling all extensions with no success.
Sandbox reproduction: https://codesandbox.io/s/hungry-golick-2fnlnt?file=/index.html
<input id="input-guess"
type="text"
bind:value={guess}
spellcheck="true"
placeholder={$t('common.enter_a_word')}
autocomplete="off"
list="autocompleteOff" />
I was able to reproduce this issue on a custom autocomplete control, and fix it by adding aria-autocomplete="both" aria-haspopup="false" to my input field:
You can keep your field ID, and other attributes autocomplete="off" spellcheck="false"
<input id="form-input-id" type="text" class="form-control" placeholder="Start typing" autocomplete="off" spellcheck="false" aria-autocomplete="both" aria-haspopup="false">
References:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
I can't reproduce the issue either, I think it has something to do with the local cache in your browser. Please try clearing your browser cache: Navigate to edge://settings/privacy -> Clear browsing data now -> choose what to clear -> select option Autofill form data(includes forms and cards) -> clear now.
In addition, you could also try to turn off Save and fill basic info in Edge: Just Navigate to edge://settings/personalinfo and check if this work for you.
How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?
In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.
When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.
What is the solution for this?
Add the aria-autocomplete="list" attribute to the input.
<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">
Do not use any other value for the attribute.
According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.
If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.
Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.
I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.
Like this（do not use attribute values like name or email... and maybe there are others I am not aware of):
<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">
<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">
<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">
<input type="submit">
I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.
Autocomplete has been causing me trouble for quite some time. It overlays buttons and search results which causes users to click it instead of a link on the webpage.
I have been searching the internet for solutions to this for literally years. None of them are both practical and work consistently. I have tried all the alternatives to "off" listed throughout the relevant Google searches.
Below I have uploaded a GIF. The GIF shows me triggering autocomplete on an input which has autocomplete set to off.
I then remove the name attribute of a separate input within the form and suddenly autocomplete switches off.
I also demonstrate that having the keyword "Company" in the placeholder seems to override autocomplete=off. However, this does not seem to override autocomplete=off in all situations.
In the below example I used a datepicker, but I can also reproduced the problem with simple text inputs.
Is there a reason behind this strange behavior?
One solution is to use type="search", however, this may not be the desired approach for all developers.
Thanks in advance.
Have you tried this ?
<input name="unm" id="unm" type="text" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
Try using a form method.
<form method="post" action="">
<div>
<label for="cc">Please work:</label>
<input type="text" id="cc" name="cc" placeholder="Enter a company here" autocomplete="off">
</div>
I have a problem with the Forms Module of Angular Material!
I try to create a tag with many Angular Material Basic Inputs.
But on the website, only one Input field appears. The other input fields only show the value of the field. Now, when i click on the first input field, then the other fields appear correctly, but only when i click on the first input field?
Before i clicked on the first input field
And after
<form class="example-form" style="margin-top: 15px">
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" disabled>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" disabled>
</mat-form-field>
</form>
It seems that in your case, there might be some render errors. I suspect this as you have a disabled button in the template, but on your screenshots they do not appear to be so.
Check you Browser console. (F12 o CTRL+SHIFT+i) If you refresh your app, can you see any errors? Those can make the app work in undeterministic ways. In the command line, where your run ng serve do you see any errors maybe? Fix these first, and try again.
On HTML inputs in Chrome, how can the autofill be disabled for individual fields?
See the image below to see the issue. I'm using the Date/Time dropdown for bootstrap (but this can be for any plugin)
Chrome seems to cache the previously entered input when the form is submitted. So when the user comes back to the page again, this creates a UX issue.
What I've tried so far,
<input type="text" class="form-control js-datetime-picker" autocomplete="new-field">
<input type="text" class="form-control js-datetime-picker" autocomplete="off">
<input type="text" class="form-control js-datetime-picker" autocomplete="false">
How can the auto-suggestions be disabled for a single field (not the whole form)?
UPDATE:
Since posting, I've found out this is a bug (branded as a feature) on Chrome, and the discussion is ongoing. If anyone has a solution, without using additional hidden fields or Javascript, please share.
https://bugs.chromium.org/p/chromium/issues/detail?id=587466
On the form parent of the input elements (add one if there isnt one already) add this autocomplete='off' and then on the inputs add autocomplete='false'.
And to answer your question, 'can individual fields be disabled without the whole form' Yes. But you would need to add another form onto the child element.
Cheers.
You can deactivate the autocomplete with autocomplete="new-password"
autocomplete="off" or autocomplete="false" is not working anymore
autocomplete="off" is the right solution. In your case I think there is some problem with Chrome browser. Update chrome or reinstall. That might solve your problem.