La directiva ng-focus en AngluarJS se usa para aplicar un comportamiento personalizado cuando se enfoca un elemento. Se puede usar para mostrar/ocultar algún elemento o puede mostrar una alerta emergente cuando se está enfocando el elemento. Es compatible con los elementos <a>, <input>, <select> y <textarea>.
Sintaxis:
<element ng-focus="expression"> Contents... </element>
Donde las expresiones dicen qué hacer cuando la entrada se enfoca.
Ejemplo 1: este ejemplo utiliza la directiva ng-focus para mostrar el campo de área de texto.
html
<!DOCTYPE html> <html> <head> <title>ng-focus Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app="" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-focus Directive</h2> <a href="" ng-focus="isCheck=true"> Click to proceed. </a> <br><br> <div class="row" ng-show="isCheck"> Enter Name: <input type="text" ng-focus="isCheck=true" placeholder="geeksforgeeks" /> </div> </body> </html>
Salida:
Antes de hacer clic en el enlace:
Después de hacer clic en el enlace:
Ejemplo 2: este ejemplo utiliza la directiva ng-focus para mostrar el foco en el campo de texto de entrada.
html
<!DOCTYPE html>
<html>
<head>
<title>ng-focus Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center;">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-focus Directive</h2>
<div ng-controller="geek">
Input: <input type="text" ng-focus="focused = true"
ng-blur="focused = false" />
<pre ng-show="focused">Input is focused.</pre>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>
Salida:
antes de hacer clic en el área de texto:
Después de hacer clic en el área de texto:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA