Переключение фокуса между полями в Angularjs

64
8

Мне нужно переключить фокус между полями, если пользователь нажимает enter. И если оба поля (login & pwd) не пустые $ scope.submit Вызывается. Вопрос в том, как переключить фокус между этими двумя полями? Я могу сделать это с помощью document.getElementByid, но если нет id attr? Как я могу получить в angularjs html тег с ng-моделью для установки фокуса?

JS:

app.controller('loginCtrl', function($scope, $location, $rootScope,$http){
$scope.username = '';
$scope.password = '';
$scope.enter=function(){
if ($scope.username!="" && ($scope.password=="" || $scope.password==undefined)) document.getElementById("password").focus();
else if($scope.password!="" && ($scope.username=="" || $scope.username==undefined)) document.getElementById("username").focus();
else if($scope.password!="" && $scope.username!="") $scope.submit();
};
$scope.submit=function(){
var data={};
data.login=$scope.username;
data.pwd=$scope.password;
$http.post("authorization.php", data).then(function success (response) {
console.log(response);
if (response.data['loggin'] === true) {
$rootScope.loggedIn = true;
$location.path('/dashboard');
$rootScope.name = response.data['name'];
}
else {
$scope.username = '';
$scope.password = '';
}
},function error (response){
console.log(response);
}
);

}
});

HTML:

<div ng-controller="loginCtrl"  class="login">
<form action="/" id="myLogin" method="post">
<input type="text" name="username" id="username" ng-model="username" placeholder="Username" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null"><br>
<input type="password" name="password" id="password" ng-model="password" placeholder="Password" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null"><br>
<br>
<button type="button" ng-click="submit()" class="btn btn--right">Login</button>
</form>
</div>

спросил(а) 2021-01-19T20:38:49+03:00 6 месяцев, 2 недели назад
1
Решение
90

Надеюсь, это поможет вам. Спасибо.

HTML

<input type="text" name="username" id="username" ng-model="username" placeholder="Username" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null" focus-me="setFocusValueName"><br>
<input type="password" name="password" id="password" ng-model="password" placeholder="Password" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null" focus-me="setFocusValuePwd"><br>

директива

  directive('focusMe', function () {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.focusMe, function (value) {
if (value === true) {
console.log('value=', value);
element[0].focus();
scope[attrs.focusMe] = false;
}
});
}
};
});

контроллер

В контроллере установлен TRUE/FALSE для $ scope.setFocusValueName & $ scope.setFocusValuePwd на основе вашего требования.

$ scope.setFocusValueName = true/false; $ scope.setFocusValuePwd = true/false;

ответил(а) 2021-01-19T20:38:49+03:00 6 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема