I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:
loginModel = {
username: '',
password: ''
};
They are bound to input elements like so:
input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)
input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")
I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled
button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In
The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.
I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello#world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.
Hopefully my question makes sense. Thank you for your help!
Related
Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.
I'm using Angular and I have a button with an ng-disabled attribute that disables it until the user enters text in two text fields:
<input ng-model="name" type="text">
<input ng-model="password" type="password">
<input ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
This works fine, however when the page first loads the button is enabled for a fraction of a second while angular loads and the browser processes the condition.
I want the button to be disabled from the instant the page loads and only enabled once the user enters text in those two fields.
Does anyone know if there is a solution to this?
If you want the input to be already disabled even when angular is still loading, then make the input already disabled:
<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
However, if you want the input to be disabled to avoid the user clicking it before angular makes it disabled due to security reasons, take note this is useless. Any user with a minimum knowledge can use the browser console to remove the disabled from the input and click if they want to.
This is just aesthetics, and I personally would encourage you trying to understand why the button is taking so long to get disabled. It shouldn't take long enough so users could notice it.
I've this html source of this url: https://login.freecharge.in/login?callbackurl=https://checkout.freecharge.in/payment. This page has two input fields - login & password.
I want to locate the handler being called when we key-in the login and password. For example when I type these two values then Sign In button gets enabled:
aaaaaaaaaa#gmail.com
password11233455
In the login textfield if I delete last two characters "om" by pressing Backspace leaving login to "aaaaaaaaaa#gmail.c" then Sign In automatically gets disabled.
Login field code
The html code of the login field looks like this:
<input id="loginEmailMobile" name="loginEmailMobile" autocomplete="loginEmailMobile" type="text" focus-me="vm.focus == 'LOGIN'" focus-delay="200" ng-focus="frmLogin.loginEmailMobile.blured = false" ng-blur="frmLogin.loginEmailMobile.blured = true" required="" ng-model-options="{allowInvalid:true}" ng-model="vm.data.login.emailOrPassword" ng-maxlength="127" ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$" no-space="" class="ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-valid-required ng-invalid ng-invalid-pattern">
Sign-In Button code
<button value="Submit" class="submit disable" ng-class="{'disable':frmLogin.$invalid}" id="signInButton" ng-click="vm.signinClickHandler(frmLogin.$valid)"><span id="textLoginSignIn">SIGN IN</span></button>
Now I've searched loginEmailMobile in all the files and I don't find this except in this code. So who is listening to this element and taking action? How to find it?
This is done via the Angular framework, with the following patter:
ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$"
It means if the input does not look like an email, the field is not valid. Then, you didn't post this code, but most likely on the button there's something like ng-enabled="..." with a condition that checks if the email field is valid.
Background
I have a form with an input field containing the user's email address. I am using interpolation to add the email to the placeholder field.
Problem
I do not want the user to be able to change the email address in this field. I only want them to be able to see it. But I do want it to post with the form.
Question
I keep trying different ways and no matter what the form does not post the email. How can I bind it so that it will actually post the email address when the form is submitted?
Examples
I tried with readonly. That way they would not be able to change it.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}" readonly>
I tried without readonly just to see if it would work if I do not add any restriction flags.
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email" name="email" #email="ngModel" placeholder="{{auth.user.email}}" value="{{auth.user.email}}">
I know the email is accessible because I am adding it to the placeholder field and it shows up in the form. It just wont post.
The default value will be the value assigned to personal.email.
Alternatively you can bind to a different property
[(ngModel)]="personalEmail"
and assign a default value to personalEmail and on submit update persona.email in code or use
[ngModel]="personalEmail" (ngModelChange)="personal.email = $event"
to get the initial value from personalEmail and update personal.email when changes happen
This might also work (not tried)
[ngModel]="personal.email || 'defaultValue'" (ngModelChange)="personal.email = $event"
to only get 'defaultValue' assigned if personal.email is null
Here model is personal.email and the default value is auth.user.email
<input type="text" class="form-control" id="email" [(ngModel)]="personal.email = auth.user.email" name="email" #email="ngModel">
I have following HTML code. writer input field is text filed. but I want to pretend that one is password field. whenever someone type anything, one key will display as * only, as you know how password field show; additionally the entry at writer input field should be populate in holder value which field is hidden. Can you please write in simple java script coding.
Password: <input type="text" id="writer" value=""/><input type="hidden" id="holder" value=""/>
This one show http://www.symplik.com/password.html, whatever we enter, it doesn't look good, it should be all * only when you start typing in it.
Simply use <input type="password" id="txtPassord" value=""/>