Angular의 입력 필드에 포커스 설정

입력 필드가 나타날 때 포커스를 주려면 폼을 표시한 뒤 DOM 요소의 focus() 메서드를 호출하는 사용자 지정 지시문을 사용합니다. 아래 예시는 레거시 프레임워크인 AngularJS 1.x를 사용하며, 최신 Angular 예제가 아닙니다. ng-model은 입력값을 모델 속성에 바인딩하지만 필드에 포커스를 주거나 내용을 검증하지는 않습니다. 이어지는 JavaScript 예시의 출력은 Focused: true이며, Focused: 레이블은 영어로 표시됩니다.

Angular에서 입력 필드에 포커스를 설정하는 단계

간단한 대체 객체를 사용하면 focus() 호출을 다른 동작과 분리해 확인할 수 있습니다. 이 JavaScript 예시는 AngularJS나 브라우저를 실행하지 않으며, 전체 브라우저 연결 예제는 뒤에서 살펴봅니다.

다음 예제를 실행합니다:

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

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

Focused: true

AngularJS에서는 컨트롤러와 같은 모듈에 지시문을 등록한 다음, 입력 요소에 focus-me 속성을 추가합니다. 클릭 핸들러는 폼을 표시하고 포커스 트리거 값을 설정합니다. 짧은 $timeout을 사용하면 AngularJS가 뷰 업데이트를 마친 뒤 지시문이 표시된 요소에 포커스를 줄 수 있습니다.

다음 독립 실행형 브라우저 페이지에는 모듈, 컨트롤러, 지시문, 마크업이 모두 들어 있습니다. 애플리케이션에서 CDN을 사용하지 않는다면 AngularJS 스크립트 URL을 로컬에서 호스팅하는 사본으로 바꾸세요. 이 페이지는 원래 예제와 버전을 맞추기 위해 AngularJS 1.0.4를 사용합니다. 이 레거시 버전은 맥락을 설명하기 위한 것으로, 새 애플리케이션에는 권장하지 않습니다.

<!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는 focus-me 속성을 지시문 이름인 focusMe로 정규화합니다. 격리 스코프의 속성 이름은 HTML 속성과 같으며, = 바인딩으로 컨트롤러의 focusInput에 연결됩니다. 버튼이 해당 값을 true로 설정하면 감시자가 뷰 업데이트 후 포커스를 예약한 다음 값을 초기화하므로 동작을 다시 실행할 수 있습니다. 브라우저가 입력 요소에 포커스를 주려면 해당 요소가 표시되어 있고 활성화되어 있어야 합니다. 포커스 표시는 브라우저 자체 스타일에 따라 그려지므로 브라우저와 테마에 따라 모양이 다를 수 있습니다.

포커스를 주면 키보드 입력 위치가 해당 필드로 이동하지만, 값이 유효한지 확인하거나 입력 실수를 막아 주지는 않습니다. 입력 규칙이 필요하다면 AngularJS 폼 검증을 별도로 추가하세요. ngBlur는 사용자가 탭 키로 다른 곳으로 이동하는 경우처럼 요소가 포커스를 잃을 때 반응합니다. 입력에 포커스를 주거나 포커스를 해제하는 데 필요한 지시문은 아닙니다. 이 브라우저 예제는 실제로 실행해 검증하지 않았습니다.

이 패턴은 폼이 나타날 때 추가 클릭을 줄이고 사용자가 다음에 입력할 위치를 분명하게 해 줄 수 있습니다. 자동 포커스는 신중하게 사용하세요. 특히 긴 작업 흐름에서 예상치 못하게 포커스가 이동하면 키보드나 화면 낭독기 사용자가 당황할 수 있습니다. 레이블을 항상 보이게 하고 탭 순서를 명확히 유지하며, 필드에 포커스가 간 뒤에도 사용자가 원하는 대로 포커스를 이동할 수 있게 하세요.