I have an advanced search form that terms/rows can be added to dynamically. I have noticed that the larger the form, then slower the form is when you click in a text field. Sometimes, you click in a text field and wait around 2 seconds on a moderately sized form before anything typed shows up.
It only happens when the text field is initially empty - and only in Safari.
I discovered that if I go into the Safari Preferences, go to the "Autofill" tab, and turn off all "Autofill web forms" checkboxes, the form is zippy - no lag. Apparently, Safari is trying to figure out how to suggest things to enter, like info from my contact card, usernames and passwords, credit cards, etc...
This advanced search form doesn't seem relevant to any of that (unless it tracks repeatedly entered search terms...?). So here are my questions:
Is there a way to tell Safari to not look for autofill possibilities, so that my form doesn't have this lag in Safari?
If #1 isn't an option, is there a way to make Safari's suggestions more efficient - so it can more quiickly figure out that there's nothing to suggest?
Regarding #2, my text fields have no label. The "labels" are the values chosen in the preceding select lists. Here's an example:
Note that after the 1-2 second delay, the autofill icon appears in the field:
Could adding hidden labels make Safari's autofill feature more efficient?
I tried and failed with various "solutions" I found here on stack:
Set attribute autocomplete="off" in both the form and input elements
Added a hidden label both above and below the input tag
Added a class name suggesting the input field type
Tried a javascript solution
None of them worked. I still experienced a delay between clicking in a field and being able to enter text - and the user icon still presented phone number suggestions from my contact card.
I read an old, but otherwise helpful article about how to coax autofill to fill in the correct information. It didn't mention the solution I stumbled upon, but it inspired me to try it...
I added a placeholder attribute to the text input in my django form class:
val = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "search term"}))
And that did it! Now when I click in a search term field (which now shows "search term" in light gray - which is grudgingly OK with me), I can enter text right away and the autofill icon does not appear!:
Related
I've seen other questions asking how auto-fill works, but the answers all explain how to make it work, which is not what I want. I want to stop it from working. And I also realize that there are many questions out there asking that specific thing, but the answer is always to set autocomplete=off, which we all know is useless because browsers don't honour it.
And besides that, my question is a little bit different because what I'm really asking is how the browser decides which inputs to populate with what data, because I'm hoping with that knowledge I can prevent the problem I'm having.
Specifically the issue I'm having is that every time I open up my "change password" page, my search input is automatically being filled with the username. I'm trying to understand why it's doing that so that I can prevent it.
My input does not have a name or a label or an autocomplete attribute. It's just very simply as shown here. So in what universe does it make sense for a browser to find a field with the id "searchinput" and think that it makes sense to auto-fill it with a username?
<input type=text id=searchinput placeholder='Search'>
Also, on the change password page, the first of the two password fields is automatically filled in (presumably with the matching password but I can't see it because it's all circles). So why are these browsers auto-filling my search input with the username and how can I prevent it?
To explain a bit further what my code is doing: When the user selects "change password" from the menu, I load my change password page into a div (using jquery load) on the existing page and slide it down to cover most of the browser window (minus the header and menu), which means whatever page they're currently on is still there underneath, and that's also why my search input is still visible. The auto-fill happens as soon as I load my change password page.
In my particular case, the reason the input field was being auto-populated with the username is because Chrome auto-fills the first password field it finds (and you can't stop it), and then also auto-fills with the user name whatever input field comes before the password field in the DOM, regardless of what the name, id, or purpose of that field might be. In my case, it was the search input.
So to get around this I had to create another input just before the new password input and hide it out of view with absolute positioning so that Chrome will fill this useless field instead of my search input. Sigh.
<input type=text style='width:0px;position:absolute;right:-100px'>
I also added an "out of view" password field so that Chrome will auto-fill this field instead and not the first password field in my form.
<input type=password style='width:0px;position:absolute;right:-100px'>
Update **
I found that the event is firing but there is no visual clue for the user. Is there a way to make it obvious to user that these labels are clickable.
Adding a gif to illustrate the issue.
I looked for an obvious answer on web but I could not find the solution. Hopefully, it is a property setting somewhere.
I have a continuous form with labels in form header. We have an event on double click on one of the labels. However, when the form is displayed, none of the labels are clickable. If it allows us to write events (click / dbl click) then obviously these labels should be clickable.
I looked through the properties of label but there is no "enabled" property. So, question is that how to make the label clickable? I hope it is a simple property setting.
Thanks
Labels are fine for clickable..i use them a lot to perform various operations like dynamic sorting.
EDIT : because i just noticed it...when textboxes/checkboxes/optionboxes are dropped in a form the labels that are associated with them don't have any events...you have to put explicitly an unassociated label to have its events exposed
In my HTML I have a form with a few inputs (type text) and I have 2 app-comboboxes. What I would like to do, is set autocomplete off for every field in the form.
I set autocomplete="off" for the entire form, works perfectly except on those 2 dropdowns.
The dropdown works in the following way: if I click on it, a dropdown will appear with the full list of options to choose. If I type something, the list will be filtered based on what I typed. My problem is, when the field is empty, and when I click on it, another dropdown appears with early typed values, suggestions from Chrome above my dropdown with the full list of values. My Google Chrome Version is 69.0.3497.
I tried to put another autocomplete="off" in the app-combobox element, which didn't work. Then I tried to write a random string for autocomplete (eg. autocomplete="nope"), didn't work again.
I tried every solution which I found, but none of them work.
I would appreciate if someone has a solution for this, or just a clear answer that you cannot do this anymore in Chrome.
Thank you very much!
Using Robot Framework (with Selenium) to automatically fill a form - it's a checkout page on a ecommerce website,
It bugs at the very last step, when trying to enter the CVC code of a test credit card,
Robot throws a "InvalidElementStateException: Message: invalid element state: Element is not currently interactable and may not be manipulated"
when the field is clearly visible and actionable.
Using Chrome, not Firefox (can't get it to work at all with FF)
I made sure the test scrolls the page down to see the field, but it still considers that field to be hidden or not actionable.
Has anyone run into the same issue here?
Section of the code that fails is here:
Card Payment is Visible
Execute JavaScript window.scrollTo(0,700)
Wait Until Page Contains Expires
Focus xpath=//*[#id="securityNumber"]
I Enter the CC Security Code
Input Text securityNumber ${CHECKOUT_CARD_CODE}
I Click Submit Order
Submit Form forms.payByCardForm
(the bits about "Focus" and "Input Text" are the ones that fail. I validate the text "Expires" is visible, it's right above the CVC field...)
I also tried:
Wait Until Element is Visible id=securityNumber
But it still fails.
It takes a screenshot and it's clearly there...
Oh well...payment forms you don't build yourself will always be trouble. This one is built using AngularJS so it's even more trouble.
I found how to locate the proper field by using a css property, since there is a hidden form that contains the same field with the same ID and Name.
I did have to use "Sleep" for it to work as well (thx Goralight).
And thanks to everyone else.
Use unique identifiers. Had same issue with the "description" field. Upon using View Source [Code] I see "description" in my HEAD META tag. Changed id fields to use "product_description" - error is gone. Code works.
I found the specs for the HTML autocomplete attribute here:
http://www.w3.org/Submission/web-forms2/#the-autocomplete
But it doesn't mention when it is applied to. It seems like when it is on, then that means a user can press the Back and Forward button of the browser and the data will be kept in the input text box, or if the user chooses a history item using the Back and Forward button area. And when it is off, that means the data should not be kept in the input box.
And it is not about:
the history window bringing a page back (after clicking on a history item)
any bookmark bringing a page back
typing in the same URL in the browser
suggestion, such as when a user typed in "macbook" before, now the user types in "mac", and it tries to suggest "macbook" either just inside the input box (but with the "book" part highlighted so the user can keep on typing, or by showing an extra pop up box down under the input text box, for a list of suggestions.
since any time a user exits the browser, for what is known as a "session end", then by (1) to (4) above, there is no way that the data will follow the autocomplete="on" behavior.
Is this the exact behavior of autocomplete? (any pointers to a more exact spec will be appreciated).
I made a static webpage and tried it on a Macbook locally using Apache and localhost://try.html, but the basic behavior can be tested here:
http://jsfiddle.net/jzNTM/3/
http://jsfiddle.net/jzNTM/4/
Autocomplete: Should the browser remember answers for the given field. (number 4 in your list)
autocomplete="on" is the default
Say you have a social-security-number input field
<input name="ssn" placeholder="xxx-xx-xxxx" />
If I enter 555-55-5555 the browser will remember that answer
If I (or anyone else) comes back to the form later and start to type "5" into the field, the browser will auto-complete / auto-suggest "555-55-5555"
For something sensative like a SSN, this is probably most undesireable. (great way to harvest personal data from a public computer)
Adding autocomplete="off" to the input (or form) will prevent the browser from remembering entered values
<input name="ssn" placeholder="xxx-xx-xxxx" autocomplete="off" />