Establecer el enfoque en el campo de entrada en Angular

Para enfocar un campo cuando aparece, usa una directiva personalizada que llame al método focus() del elemento del DOM después de mostrar el formulario. El ejemplo siguiente usa AngularJS 1.x, el framework heredado; no es un ejemplo de Angular moderno. ng-model vincula el valor del campo a una propiedad del modelo, pero no enfoca el campo ni valida su contenido.

Pasos para enfocar el campo de entrada en Angular

Un pequeño sustituto permite ver con claridad la llamada a focus() por separado. Esta ilustración de JavaScript no ejecuta AngularJS ni un navegador; a continuación se muestra la integración completa en el navegador.

Ejecuta este ejemplo:

const input = {
  focused: false,
  focus() {
    this.focused = true;
  }
};

input.focus();
console.log(`Focused: ${input.focused}`);

La salida mostrada es Focused: true: indica que el elemento tiene el foco. La etiqueta Focused: permanece en inglés.

Focused: true

En AngularJS, registra la directiva en el mismo módulo que el controlador y añade después su atributo focus-me al campo de entrada. El controlador del clic muestra el formulario y activa el indicador que solicita el foco. Un $timeout breve permite que AngularJS termine de actualizar la vista antes de que la directiva enfoque el elemento visible.

La página independiente para el navegador que sigue incluye el módulo, el controlador, la directiva y el marcado. Si tu aplicación no usa el CDN, sustituye la URL del script de AngularJS por una copia alojada localmente. La página usa AngularJS 1.0.4 para coincidir con la versión del ejemplo original; se muestra como referencia histórica y no se recomienda para aplicaciones nuevas.

<!doctype html>
<html ng-app="focusDemo">
<head>
  <meta charset="utf-8">
  <title>AngularJS input focus</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
  <script>
    var app = angular.module('focusDemo', []);

    app.controller('DemoController', ['$scope', function($scope) {
      $scope.showForm = false;
      $scope.focusInput = false;
    }]);

    app.directive('focusMe', ['$timeout', function($timeout) {
      return {
        scope: { focusMe: '=' },
        link: function(scope, element) {
          scope.$watch('focusMe', function(value) {
            if (value) {
              $timeout(function() {
                element[0].focus();
                scope.focusMe = false;
              });
            }
          });
        }
      };
    }]);
  </script>
</head>
<body ng-controller="DemoController">
  <button type="button" ng-click="showForm = true; focusInput = true">
    Show the form
  </button>

  <div ng-show="showForm">
    <label for="name">Name</label>
    <input id="name" type="text" ng-model="name" focus-me="focusInput">
    <button type="button" ng-click="showForm = false">Done</button>
    <p>The browser's focus indicator marks the active input.</p>
  </div>
</body>
</html>

AngularJS normaliza el atributo focus-me y lo convierte en el nombre de directiva focusMe. La propiedad del ámbito aislado usa el mismo nombre que el atributo, y la vinculación = la conecta con focusInput en el controlador. Cuando el botón establece ese valor en true, el observador programa el enfoque para después de actualizar la vista; luego restablece el valor para que la acción pueda activarse de nuevo. El campo debe estar visible y habilitado para que el navegador pueda enfocarlo. El navegador dibuja el indicador de foco según sus propios estilos, por lo que su aspecto puede variar entre navegadores y temas.

El foco mueve el cursor de teclado al campo; no confirma que un valor sea válido ni evita errores al escribir. Si necesitas reglas para los datos de entrada, añade la validación de formularios de AngularJS por separado. ngBlur responde cuando un elemento pierde el foco, por ejemplo, cuando el usuario pasa a otro elemento con la tecla Tab; no se necesita para enfocar el campo ni para quitarle el foco. El ejemplo para navegador no se ha verificado mediante ejecución.

Este patrón puede evitar un clic adicional cuando aparece un formulario y dejar claro dónde empezar a escribir. Usa el enfoque automático con criterio: puede sorprender a quienes usan el teclado o lectores de pantalla si el foco cambia inesperadamente, sobre todo en flujos de trabajo largos. Mantén una etiqueta visible y un orden de tabulación claro, y permite que los usuarios muevan el foco con normalidad después de que el campo lo reciba.