I've recently started working with angular js and am attempting to incorporate animations into my login page.
I have created a controller that will modify the class of the input field when clicked and when blurred.
app.controller("con", function($scope,$rootScope,$http,$location){
$scope.OnClick = function(event){
$scope.username1 = "active";
$scope.password1 = "active";
};
$scope.OnBlurUserName = function(event){
if(this.username)
$scope.username1 = "active";
else{
$scope.username1 = "input";
}
};
$scope.OnBlurPassword = function(event){
if(this.password)
$scope.password1 = "active";
else{
$scope.password1 = "input";
}
};
});
<div class = "input" ng-class="username1" ng-controller="con">
<label class="label">Username</label>
<input class="field" name="username" type="text" ng-model="username"
ng-click="OnClick()" ng-blur="OnBlurUserName(username)" required>
<div class="input" ng-class="password1" ng-controller="con">
<label class="label">Password</label>
<input name="password" class="field" type="password" ng- model="password"
ng-click="OnClick()" ng-touched="OnClick()" ng-blur="OnBlurPassword(password)" required>
When I click on the username and password fields, the classes are successfully changed. However, if I enter text in the username field, press a tab button, then enter text in the password field, the class doesn't change.
How can I determine if the user has begun entering input and apply the same class that is applied on click?
Thank you in advance!