Fokus auf das Eingabefeld in Angular setzen
In Angular können Sie die Direktive ng-model verwenden, um sich auf Eingabefelder für beliebige HTML-Elemente zu konzentrieren und den Wert des Eingabefelds an eine Variable im Anwendungsmodell zu binden.
Die ng-model-Direktive stellt auch einen Event-Handler bereit, der sich auf das Eingabefeld konzentriert, wenn der Benutzer es ausgefüllt hat. Es löst ein Ereignis aus, wenn der Benutzer dieses Feld verlässt, wodurch Validierungslogik oder andere Verhaltensweisen ausgelöst werden.
Dieser Artikel demonstriert das Setzen des Fokus auf das Eingabefeld in Angular.
Schritte zum Festlegen des Fokus auf das Eingabefeld in Angular
Sie müssen die folgenden Schritte ausführen, um den Fokus in Angular festzulegen.
-
Erstellen Sie eine Angularkomponente.
-
Fügen Sie die Eingabekomponente zu Ihrer Komponente hinzu.
-
Erstellen Sie eine
Focus-Direktive, um das Eingabefeld zu verwalten. -
Fügen Sie diese Direktive dann der Liste des Anbieters hinzu, indem Sie sie in
app.module.tsimportieren. -
Danach ist es ein ausgezeichneter Ansatz, die Direktive
ngBlurzu verwenden, um den Fokus zu verlieren, wenn der Benutzer das Eingabefeld verlässt.
Wenden wir die obigen Schritte an und legen den Fokus in der Angular-App fest.
JavaScript-Code:
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;
}
});
}
};
});
HTML Quelltext:
<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>
Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.
Wenn Sie hier in diesem Beispiel etwas in das Feld schreiben, wird um die Ecke des Felds ein schwarzer Rand angezeigt, der anzeigt, dass es fokussiert ist.
Warum ist es notwendig, den Fokus in Angular zu setzen? Das Setzen eines Fokus auf die Eingabekomponente in Angular stellt sicher, dass die Eingabe des Benutzers gültig ist.
Dadurch wird sichergestellt, dass der Benutzer keine Tippfehler hat und alle erforderlichen Informationen eingegeben hat. Es kann auch Zeit bei der Eingabe von Daten in ein Formular sparen und dem Benutzer ein besseres Erlebnis bieten.
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