I am building on a standard form driven user login panel. Works well enough. All browsers recognize the pattern as a login panel and helpfully offer to store passwords. The way the user login information is then later recalled varies by browser. I focus here on FF, but the problem is universal.
Like any standard form, my login form comprises basic INPUT tags. W3C says that INPUT tags should fire ONCHANGE only ONBLUR. If I wanted to drive an OK (submit) button, say, that was disabled until some information was entered into my form, then W3C standard-compliance means that my OK button does not become enabled until the user clicks away from the field. I don't much like this behaviour and throughout my app, my INPUT tags are backed by JS code that fires ONCHANGE the moment a modifier key goes down. That's all dandy. However...
When FF recognizes my login form, it suggests to recall my login information. When I accept, FF helpfully fills in the two fields and ... my OK button remains disabled (because my keyboard driver, which detects the modifier keys and fires the ONCHANGE event, remains unaware of the form change; FF has pasted the information into the field without the use of the keyboard buffer).
Has anyone come across this problem before and discovered what event browsers fire when information appears "out of nowhere" in an INPUT field?
Thanks.
You're not the first, see:
Trigger javascript event when using Google auto fill on firefox
which suggests
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
Related
When filling out a form on google chrome/edge(doesn't happen on firefox), then pressing the back page button, then forward page button you get a weird situation where the browser maintains the information in the form. The issue comes when on submitting the form none of the values are saved to the $scope values associated to them.
How can I either disable google/edge from doing this or make it so when they do it the $scope is updated?
I agree with what Dean Van Greunen has said. Configuring autocomplete inside <input> will only disable the autocomplete feature of the attribute-applied <input> element. You will not worry about the browser's autocomplete feature.
What's more, "Forwarding" the "backwarded" page will preserve your data according to this doc:
For example, if the user makes changes, clicks Back and then Next, those changes should be preserved. Users don't expect to have to re-enter changes unless they explicitly chose to clear them.
So if you don't want the browser to preserve your data, you can either clear the data before "backwarding" the page or simply disable the input autocomplete feature. Also, simply moving the page back and forth will not trigger the $scope to update.
I am trying to cancel chrome autofilling on my inputs using autocomplete="off". I have a case of a <p:selectOneMenu> which have the attribute editable=true. Then, when I focus on the field, chrome autocomplete propose some past texts. How can I cancel this autofilling knowing that the attribute autocomplete is not available for <p:selectOneMenu>?
I have already tried to manage it through javascript, but the onfocus attribute concern dropdown click and not input area focus.
Unfortunately this is not PrimeFaces related. It is that Chrome AutoFill has been a mess over the years.
Here is the thread you want and look at how many times its been updated or answers changed just in the last 3 years.
Disabling Chrome Autofill
Basically Google has gone back and forth about allowing the developer to control what gets autofilled or not and for a while they completely ignore autocomplete="off" saying developers shouldn't decide what a user wants. Then they added some new auto-complete flags. Its a 100% mess in my opinion.
I am attempting to create a simple chrome extension autofill for Stripe Checkout pages. Chromes default autofill functions like expected however when trying to use my extensions autofill code to input values into the forms like so
document.getElementById("ID").value = "value"
the value is input initially but will be automatically removed for any number of reasons, like clicking outside of the input or anywhere else on the page will have the value of the input removed. I have tried a few different things like firing all of the necessary events for keyboard input like keyup,keydown,input, change ect and I can not get the value to stick.
I believe that stripe is using some JS to check whether or not the events sent to the input were trusted and if not it is removing the values. for this reason I have attempted to use Chromes Debugger API to send commands directly to the browser. I have found a command that seems like it will work for what I need. The "Input.dispatchKeyEvent" command appears to be what I need but I do not see a way to specify what element the keys are being sent to.
chrome.debugger.sendCommand({tabId:TAB_ID}, "Input.dispatchKeyEvent",{type:"char"})
How Can I Prevent The Values From Being Removed?
Is There A Way To Send trusted key Events To A Specific Element On The Page Using The Debugger?
An Example Of A Stripe Checkout Page Can Be Found Here Click Pay Now To Be Brought To A Testing Page
https://demo.wpsimplepay.com/stripe-checkout/
Command Docs
https://chromedevtools.github.io/devtools-protocol/1-3/Input/#method-dispatchKeyEvent
I don't think is something you'll be able to do, as I'd expect Stripe would want to avoid auto-filling of card details from anything other than the browser or a trusted application.
Lets say we inputted the values 'abacadabra' and 'chimichanga' in the form field
The autocomplete of the browser shows these values when we start to input 'abac..' or 'chimi..'
Can I check the values that was already inputted in the form in some internal variables???
If you're asking if there is a way for a website to retrieve these values, there is not. It would be a HUGE privacy breach and vulnerability.
If you're asking if there is a way for YOU to see these in your browser, often your browser has a setting where you can see these.
For Firefox, this Support Forum question leads to a plugin that allows you to edit your form history.
For Chrome, this PC World article goes step by step on how to find and delete specific entries.
Click the Chrome menu on the browser toolbar and select Settings
Click “Show advanced settings” and find the “Passwords and forms” section
Select Manage Autofill settings.
In the dialog that appears, select the entry you’d like to delete from the list. Click the “x” that appears at the end of the row.
I have a form page where I have a back button and a print button both on the top and bottom of the page(coded in javascript). The back button at the bottom of the page is not working in the Internet Explorer whereas the top one and both the print buttons works good. The code chunk is same for both of back button. In addition all the buttons are are working well in Mozilla Firefox and Google chrome. For reference the codes for the back button go like this
<html:submit onclick="javascript:document.forms[0].action.value='back';" >
<fmt:message key="form.button.back"/>
</html:submit>
Any help appreciated.
Document.forms is not W3C standard anymore.
See w3c document.forms[0].fieldname equivalent
Also make sure your input field got a proper type and name field with proper values.
"In other words, there is no such property as document.forms[0].action.value unless you have an element with an ID of "action" on your page, and as Eric posted, that is not a very good idea."
See http://forums.asp.net/p/1354778/2775719.aspx
Anyway, I don't think that is the issue here. If I try to reproduce the scenario, I also get no back action in my browser. That is because if you change the value of an input form it will just change the text that the button is actually displaying in the browser to the String 'back'.
If you really want the browser to surf back in browsing history you have to code it like this:
document.forms[0].myID.onclick = history.back();
In the 'action' property of a submit-type input form you usually define a server side script that will receive the values of the textfields of the form that the user did fill out.
<form>
<input id="myID" name="myNam" action="serve.php" value="myVal" type="submit">
</form>