I have a form and there are two fields that chrome autocompletes. These fields are the email and the password.
I don't want it to autocomplete, and I've tried this:
autocomplete="off"
This works for fields that are of type text, like name. This one with that characteristic no longer reminds me.
But the password even with that keeps reminding me.
I have investigated changing the name and the ID and nothing keeps reminding me.
Until I have removed the typo and put text on it. Now it doesn't remind me or autocomplete it. But of course I can't let users enter passwords and see them.
I have tried with js to put the type text and when the user clicks on it (onFucus) it will change it to type password. But of course when the user clicks, I get a password type and now the browsers remind me of the passwords again.
My question is this:
I can put this text type input but every time the user writes, asterisks appear.
Set autocomplete to false in your form's opening tag -> <form autocomplete="false">. False works cross-browser, and you can see an explanation as to why here: Autocomplete off vs false?
In the end, to solve this problem, I changed the input type to text. With that it no longer tells me the passwords.
But how to solve the problem that passwords are seen?
Very simple, a font has been created that is all circles imitating passwords.
Related
I'm trying to implement an function that auto-fill form(maybe,some page just input-box and submit button) with python and selenium.
It is similar to browser's auto-fill form: parsing the web page, locate input-box of user-name and password on a page, and auto fill them next time.
The problem is about how to locate the username input box or password input.
I look for a way which could handle most of page,but encountered several problems:
The user name and password of some pages are not in the form label;
There are not only user name and password entry box, but also have the verification code input box;
The name of input-box not only as "username" or "password".It maybe another word.So I can not judge by name of the username input box or password input box.
Some methods have been tried, such as:
Password input box with password attribute;
The user name input box is near the password input box;
But the effect is not ideal.
Is there any good method or suggestion? How does the browser do it?
Here its something difficult to answer your question because you do not mention any reference anyway I am giving your 2 example image where you can find the most efficient way to find XPath
Hope it will help you to find your Right XPath
There is no way to generalize a way to automate all web pages as far as I know,as elements in DOM vary in each and every page and so you need to change in xpath locator accordingly.I know its tiresome! uff..:-(
However do have a look into Sikuli and see if this can serve your needs.
Brief overview of Sikuli mentioned in their site:
Sikuli automates anything you see on the screen. It uses image
recognition to identify and control GUI components. It is useful when
there is no easy access to a GUI's internal or source code.
More info:
http://www.sikuli.org/
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'm using a javascript library to move field labels into the field itself. When the user starts typing in the field, they fade out. However, when the user has saved their username/password in the fields, the library isn't smart enough not to put the labels in the fields, so the text of the label is overrun with the username or the obfuscated password.
Is there a state of the pre-populated fields I could query with javascript to selectively disable moving the labels into the fields?
Edit this is the library that I'm using: In-Field Labels jQuery Plugin
I see that there has been a vote to close this question because it is unclear. Let me try to be more clear. When the page loads, there is a saved username and password in the username and password fields. I am wondering if there is some property on these fields that will tell me if they are populated with saved values when the page finishes loading. If this is unclear please ask a clarifying question.
The reason I want to know this is because I am using a javascript library that puts a field's label visually within its field, so you get [Username____] instead of Username [________]. The problem is when the browser has saved the username, then the text "Username" in the field runs over the saved username also in the field. I want to stop the moving of the field label into the field only if there is a value already in it. So I am looking for a way I can tell if the field is pre-populated.
I think what you are talking about is a PlaceHolder attribute :
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
See this JSFiddle :
<input type="text" placeholder="label"/>
For a cross browser compatibility, see this plugin : https://github.com/mathiasbynens/jquery-placeholder
Form validation plugin:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Test url:
http://docs.jquery.com/Plugins/Validation
How to reproduce:
1.) Click on the name text input. Enter "12345".
2.) Tab to the next field. Enter an invalid email such as "12345#".
3.) Click on the name text input. Delete the data in the field.
4.) Click to an empty field.
Notice how the name field no longer reports incorrect data. It will be stuck like this until you refresh the page or make the email address valid. This is not the behavior I need, and I believe the spec says that this is incorrect. Any thoughts on how to resolve this?
This is just a bug in the library. There is no obvious workaround.
Yes, but when you press submit, it asks for the name again.