I have an input text field, when user enters any alphabet/word, I have to suggest relevant topics.
The problem here is, the browser is also doing the same thing. It is showing previously entered data, which overrides the information shown in the site.
PFB the image, the circled black d, is a suggestion by browser (firefox in this case) and below list, (Git-Commands, Equals Method etc) is shown by me.
I want browsers to stop showing suggestions for this particular field.
How to do that?
The site is build in simple HTML and JavaScript.
Reference The searchbox on homepage on : mohitkanwar.com
PS: I have tried using autocomplete="off" . It does not work here, as it is not autocomplete, it is suggesting.
<input autocomplete="off">
Should do it. It will NOT work on login-fields, however, as most Browser vendors decided to ignore the setting there. Further Information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Use the autocomplete attribute, see http://www.w3schools.com/tags/att_input_autocomplete.asp for details.
Related
Is there a way to get access to values suggested in an input with autocomplete='on' without manually clicking on it ?
<input autocomplete name='email' />
I tried, with the help of javascript, to click/focus/faked a KeyboardEvent but nothing seems to work.
And even if I succeed to show the list of the different values, which I can't, is it possible to collect them after that ?
Thanks !
first question on stackoverflow, have some mercy please
The autocomplete area is a part of browser not the webpage. You cannot access its items. The only way is to create your own autocomplete module with JS and turn off the autocomplete attribute of input.
I have an input type email.
<form>
E-mail:
<input type="email" name="email">
</form>
As soon as the user start typing, I would like to give them the option of most popular emails. Ex. #gmail.com ...
See the image below for details.
How would one go about and implement something like this?
Is there any plug-in or framework that help me achieve this kind of task?
Will HTML/CSS/JS have the ability to do that or only swift2 can ?
QuickType is part of the built-in iOS keyboard, and here is no way to access and/or modify it with JavaScript from a simple website. Unfortunately, you can't even detect the keyboard's height, and position some fake QuickType-like buttons over the keyboard, because the keyboard animates up from the bottom, over the current application without resizing or moving anything.
I'm afraid your only option is to add these as small buttons under the input, or maybe you can create something similar to the iOS copy/paste menu, that becomes visible, when the user starts typing in the input, and append the email endings on a click/touch.
I agree with #frzsombor, but I can think of a different workaround. It would take a lot of code though, so it might not be worth it. Anyway, what you could do is periodically take a screenshot and check for one of the colors on the keyboard in a certain position, maybe #ACB3BB (the return button color). If it is there, you could display another Quick Type Bar above the built-in one. The only problem would be if an update to iOS changes what the bar looks like, but you could always update your website. Another possible way to detect the keyboard is here. I think you need jQuery for that, though...
I am currently working on an Angular web-application.
This application consists of two single-page-applications:
- Login-Page, accessible over "domain/login.html", containing login-logic.
- Application-Page, accessible over "domain/", containing the concrete application.
If you try to access "domain/", the server redirects you to "domain/login.html", if you are not logged in yet. Otherwise you will get the Application-Page (no redirect).
In the concrete application there is a Change-Password-Page, where you have to enter the old password and the new password (twice).
The problems start, if you say "save password" on the login-page. The saved password is automatically filled inside the "Old-Password" field.
Also there is another page having a text field and a password field directly after each other (where the text-field is for a phonenumber) and the browser inserts the username into the "phonenumber"-field and the password inside the password field. This is really strange, as the fields have different names and ids and are even on another page (again one is "/login.html" and one is "/")
As this behaivor is incorrect i would really like to disable it. However I was not able to do that until now.
What i tryed:
autocomplete=off, for form and input-tags. This seems to be ignored by most modern browsers.
Two hidden (display:none) input-fields (text + password) on first position. Seems to work for Firefox, but Chrome and Opera still give you the possibility to autocomplete the fields.
Use type="text" for password-field and change it to password inside javascript-code. Again Opera and Chrome still give possibility to autocomplete those values.
So I am looking for a (clean) solution to turn off the wrong autocompletion.
Is that somehow possible?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off" || autocomplete="false"
are not being picked up anymore by Chrome (or most other browsers as far as i'm aware). I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.
I followed the advice given in this other Stack Overflow post and used a pattern found in the list of regexes used by Chrome, but for some reason Chrome is still not detecting that my field is a credit card field.
Safari detects it just fine.
Here's the input HTML, as shown by the web inspector:
<input class="control" id="card_number" type="tel" name="card_number"
value="" autocorrect="off" spellcheck="off" autocapitalize="off"
placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0"
x-autocompletetype="cc-number" autocompletetype="cc-number">
Yes, as you can see from the data-reactid, I am using React. Maybe that has something to do with it. Who knows!
I've set up a test page so that others can play with it. You can visit https://entire.life/payment-form-test in Safari, and (if you have autofill enabled and a credit card saved to it), it will pop up. If you visit it in Chrome, it will not pop up the autofill option. Even after typing the first letter of your card.
This code is open source. You can see the source for the /payment-form-test page here.
It will work if you add following attributes to respective input elements:
autocomplete="cc-number"
autocomplete="cc-exp"
autocomplete="cc-csc"
Also I noticed that Chrome will not autocomplete if one of the cc fields is missing.
You can play around here - https://jsfiddle.net/q4gz33dg/2/
Name your expiration fields card_expiry_month and card_expiry_year. I'm not sure why your current names don't trigger the regex, but changing the names seems to work.
http://jsfiddle.net/7b6xtns7/ (it's a bit messy since it's not rendered)
Edit:
Looks like ordering has to do with it too. If that doesn't work try putting the month/date immediately after the number entry field
http://jsfiddle.net/c86Lmo0L/
The accepted answer is great, thought I'd just chime in with some documentation and a note regarding React (tagged for this question)..
React requires you to pass the attribute as autoComplete="cc-number" (note camelCase), otherwise it will default to autocomplete="off".
More info:
React attributes: https://facebook.github.io/react/docs/tags-and-attributes.html
Useful examples: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://html.spec.whatwg.org/multipage/forms.html#autofill
I can confirm that. For instance, some websites only have autocomplete without any value as tag attribute.
By opening the web dev console (CTRL + SHIFT + I) I could jump to the element, double click the autocomplete tag to replace it autocomplete="cc-number", and double click in the field to autocomplete the CC details by the opening selection dialog.
All that alteration can still be much faster than fiddling with the credit card details from another app or physically holding the card .
I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.