Définir le focus sur le champ de saisie dans Angular
Dans Angular, vous pouvez utiliser la directive ng-model pour vous concentrer sur les champs d’entrée de tout élément HTML et lier la valeur du champ d’entrée à une variable du modèle d’application.
La directive ng-model fournit également un gestionnaire d’événements qui se concentre sur le champ de saisie lorsque l’utilisateur l’a rempli. Il déclenche un événement lorsque l’utilisateur quitte ce champ, déclenchant une logique de validation ou d’autres comportements.
Cet article montrera comment mettre l’accent sur le champ de saisie dans Angular.
Étapes pour définir le focus sur le champ de saisie dans Angular
Vous devez suivre les étapes suivantes pour définir le focus dans Angular.
-
Créez un composant Angular.
-
Ajoutez le composant d’entrée à votre composant.
-
Créez une directive
Focuspour gérer le champ de saisie. -
Ensuite, ajoutez cette directive à la liste des fournisseurs en l’important dans
app.module.ts. -
Après cela, c’est une excellente approche d’utiliser la directive
ngBlurpour perdre le focus lorsque l’utilisateur quitte le champ de saisie.
Appliquons les étapes ci-dessus et définissons le focus dans l’application Angular.
Code Javascript :
var app = angular.module('Adil', []);
var Demo = function ($scope) {
};
app.directive('focusMe', function() {
return {
scope: { trigger: '=focusIn' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === true) {
element[0].focus();
scope.trigger = false;
}
});
}
};
});
Code HTML:
<html ng-app="Adil">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div ng-controller="Demo">
<button class="btn" ng-click="showForm=true;focusInput=true">click here</button>
<div ng-show="showForm">
<input type="text" focus-me="focusInput">
<br>
<button class="btn" ng-click="showForm=false">Click here to save the input field</button>
<p>
The black border around the corner shows that the input field is focused
</p>
</div>
</div>
</body>
</html>
Cliquez ici pour vérifier la démonstration en direct du code ci-dessus.
Ici, dans cet exemple, lorsque vous écrivez quelque chose dans la boîte, une bordure noire s’affiche autour du coin de la boîte, ce qui indique qu’elle est ciblée.
Pourquoi est-il nécessaire de définir le focus dans Angular ? Mettre l’accent sur le composant d’entrée dans Angular garantit que l’entrée de l’utilisateur est valide.
Cela garantit que l’utilisateur n’a pas de fautes de frappe et a saisi toutes les informations nécessaires. Cela peut également faire gagner du temps lors de la saisie de données dans un formulaire et offrir une meilleure expérience à l’utilisateur.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook