Angular의 입력 필드에 포커스 설정
Angular에서 ng-model 지시문을 사용하여 HTML 요소의 입력 필드에 초점을 맞추고 입력 필드의 값을 애플리케이션 모델의 변수에 바인딩할 수 있습니다.
ng-model 지시문은 사용자가 입력 필드를 채울 때 입력 필드에 초점을 맞추는 이벤트 핸들러도 제공합니다. 사용자가 이 필드를 떠나면 이벤트가 발생하여 유효성 검사 논리 또는 기타 동작을 트리거합니다.
이 기사에서는 Angular의 입력 필드에 초점을 설정하는 방법을 보여줍니다.
Angular에서 입력 필드에 초점을 설정하는 단계
Angular에서 포커스를 설정하려면 다음 단계를 따라야 합니다.
-
Angular 구성 요소를 만듭니다.
-
입력 구성 요소를 구성 요소에 추가합니다.
-
입력 필드를 관리하기 위해
Focus지시문을 만듭니다. -
그런 다음 이 지시문을
app.module.ts로 가져와 공급자 목록에 추가합니다. -
그런 다음
ngBlur지시문을 사용하여 사용자가 입력 필드를 떠날 때 포커스를 잃는 것은 훌륭한 접근 방식입니다.
위의 단계를 적용하고 Angular 앱에서 포커스를 설정해 보겠습니다.
자바스크립트 코드:
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 코드:
<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>
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
여기 이 예에서 상자에 무언가를 쓸 때 상자 모서리 주위에 검은색 테두리가 표시되어 초점이 맞춰져 있음을 나타냅니다.
Angular에서 포커스를 설정해야 하는 이유는 무엇입니까? Angular에서 입력 구성 요소에 초점을 맞추면 사용자의 입력이 유효한지 확인합니다.
이렇게 하면 사용자가 오타가 없고 필요한 모든 정보를 입력했는지 확인할 수 있습니다. 또한 양식에 데이터를 입력할 때 시간을 절약하고 사용자에게 더 나은 경험을 제공할 수 있습니다.
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