Establecer el enfoque en el campo de entrada en Angular
En Angular, puede usar la directiva ng-model para centrarse en los campos de entrada de cualquier elemento HTML y vincular el valor del campo de entrada a una variable en el modelo de aplicación.
La directiva ng-model también proporciona un controlador de eventos que se enfoca en el campo de entrada cuando el usuario lo ha completado. Activa un evento cuando el usuario abandona este campo, activando la lógica de validación u otros comportamientos.
Este artículo demostrará cómo establecer el foco en el campo de entrada en Angular.
Pasos para establecer el enfoque en el campo de entrada en Angular
Debe seguir los siguientes pasos para establecer el enfoque en Angular.
-
Crear un componente Angular.
-
Agregue el componente de entrada a su componente.
-
Crear una directiva
Focuspara gestionar el campo de entrada. -
Luego, agregue esta directiva a la lista de proveedores importándola en
app.module.ts. -
Después de eso, es un excelente enfoque usar la directiva
ngBlurpara perder el foco cuando el usuario abandona el campo de entrada.
Apliquemos los pasos anteriores y establezcamos el enfoque en la aplicación Angular.
Código 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;
}
});
}
};
});
Código 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>
Haga clic aquí para ver la demostración en vivo del código anterior.
En este ejemplo, cuando escribe algo en el cuadro, muestra un borde negro alrededor de la esquina del cuadro, lo que indica que está enfocado.
¿Por qué es necesario establecer el foco en Angular? Poner un foco en el componente de entrada en Angular asegura que la entrada del usuario sea válida.
Esto asegura que el usuario no tenga errores tipográficos y haya ingresado toda la información necesaria. También puede ahorrar tiempo al ingresar datos en un formulario y brindar una mejor experiencia para el usuario.
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