Button is auto disabled , gets enabled after a click - html

I am working with angular TD forms. There is a form field and a submit button. The button should be disabled only if there is no values in the form. Meanwhile, chrome saves the form fields value (Username and password saving in chrome), so there are still values in the form field.But the button is disabled . But it gets enabled after clicking anywhere in the web page. How to prevent this?
The following link explained the problem in jquery. How to do the same thing in angular 7?
Enable button when browser fills data automatically

Disable the autocomplete from your form as
<form action="/..." autocomplete="off">
for more info you can refer to Disabling Chrome Autofill

Related

How does chrome detect login text boxes?

I have a textBox, that is supposed to get an url from an user.
Unfortunately, chrome autofills it with saved login name.
I would like to understand how chrome detects login input? How can I stop chrome filling this textbox?
My textbox does not have 'login' in Id or name. I could set autocomplete="off" or autocomplete = "false" for the input but I do not think it solves the problem. Tomorrow another textbox may be treated as login and I will have to redeploy code again. I need to prevent chrome thinking the input is a login textbox.
Instead of autocomplete="off" use autocomplete="false"
Setting the autocomplete attribute to "off" does not disable Chrome autofill in more recent versions of Chrome.

fill some Textbox with user name

I have a problem with chrome, when I login in to my app and move between pages chrome fill some input type='text' with usernames saved in chrome automatically. I think it's for new version of chrome, How to prevent of it? Is there a html attribute that prevent of it?
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on Settings.
In the "Autofill" section, expand the area for which you wish to disable Autofill.
Toggle the setting OFF if it is on.  The system will automatically save your settings.
Clearing Autofill Data in Chrome
Click the Chrome menu icon. (Three dots at top right of screen.)
Click on History, then click on History again in the menu that appears.
Select Clear browsing data.
At the top, choose “the beginning of time” option to clear all saved data.
Make sure that the “Clear saved Autofill form data” option is checked.
Click Clear browsing data.
Try to use autocomplete attribute
autocomplete="off"
Example : <input type="text" name="username" autocomplete="off">

Chrome Autocomplete - Remove background style when record saved

Is it possible to force Chrome to remove the autocomplete background style for a text input once the record has been saved?
<input type="text" id="fltrName" class="form-control" ng-model="calEvtFilter.name" />
When a user types an entry that has previously been used then saves the record the autocomplete style remains. The only way I can remove the style at the moment is to reset the form then populate the angularJS model with the data again?
Hi you can remove the autofill settings from your Chrome Setting
Go to Chrome Settings -> Click on Show Advanced Setting
Uncheck Enable Autofill to fill out web forms in a single click under Passwords and Forms
Close the chrome and open again

Firefox 26 showing credentials in suggestion for form fields

I'm using firefox 26. I have saved my credentials to my development site. And then i have used auto complete off feature. Following is my sample code
<form id="loginform" autocomplete="off">
<input name="username" type="text" autocomplete="off">
<input name="pwd" type="password" autocomplete="off">
</form>
Its worked fine for previous versions. After update to firefox 26, its not working. when i type first letter of my username, its showing saved credentials in suggestion. How to disable this?
Even i selected the suggested credentials, its auto fill the username and password field. But its not allowing to access site, showing login errors like enter password.
From: http://support.mozilla.org/en-US/kb/control-firefox-automatically-fills-in-forms#w_prevent-firefox-from-storing-form-entries
If you don't want Firefox to remember what you've entered into form fields, you can turn off the auto form fill feature:
On the menu bar, click on the Firefox menu and select Preferences...
.
Select the Privacy panel.
Set Firefox will: to Use custom settings for history.
Remove the check mark from the box that says Remember search and form history.
Close the Preferences window .
Disabling form history also prevents Firefox from storing search history for the Search bar in the Navigation Toolbar.
Clearing form history
If you want Firefox to forget all of your previous form entries:
On the menu bar, click on the History menu, and select Clear Recent History….
In the Time Range to clear: drop-down, select Everything.
Click the arrow next to Details to display the list of items that can be cleared.
Make sure only Form & Search History is check marked.
Click Clear Now. The dialog box will disappear and your form history will be erased.
Prevent Firefox from storing form entries
In some browsers you may need to activate an autocomplete function for this to work, or deactivate by unchecking its relative checkbox. (Look under "Preferences" in the browser's menu. This feature is in the control of user. At least in the current time.

Disabling the default form submit button in Chrome

This is related to How is the default submit button on an HTML form determined?
In my web app's design the user should be able to directly submit the form by pressing enter in a text input, in which case, none of the buttons in that form should be submitted as they have other functions. To avoid the default button problem, I handles the keydown event and submitted the form programmatically.
When I tested this in Firefox, it seems the first button in the form is pressed on the enter key. The simple solution is to disable that button in the keydown event handler.
Chrome, however, seems to 'intelligently' choose the first non-disabled button as the default button and will submit using that button even if that button will be immediately disabled by the keydown handler.
The effect can be tested using this jsFiddle. In Firefox, after the "first" button has been disabled by the checkbox, enter press in the input will only cause one submit. In Chrome, there will always be two submits, one from keydown and the other from button press, even after both buttons have been disabled!
This forces me to either change all keydown handlers in my code to return false or handle all button clicks and check if the button is disabled. Neither seems to be good code.
Any better suggestions?
May be you can hook it on blur. Try this:
<input type="text" ... onblur="submit();" />