在 Angular 中的輸入欄位上設定焦點

Muhammad Adil 2022年4月20日
在 Angular 中的輸入欄位上設定焦點

在 Angular 中,你可以使用 ng-model 指令來關注任何 HTML 元素的輸入欄位,並將輸入欄位的值繫結到應用程式模型中的變數。

ng-model 指令還提供了一個事件處理程式,當使用者填寫它時,它會關注輸入欄位。當使用者離開此欄位時,它會觸發一個事件,觸發驗證邏輯或其他行為。

本文將演示如何在 Angular 中設定輸入欄位的焦點。

在 Angular 中設定輸入欄位的焦點的步驟

你需要按照以下步驟在 Angular 中設定焦點。

  • 建立一個 Angular 元件。
  • 將輸入元件新增到你的元件中。
  • 建立一個 Focus 指令來管理輸入欄位。
  • 然後,將此指令新增到提供程式的列表中,方法是將其匯入 app.module.ts
  • 之後,當使用者離開輸入欄位時,使用 ngBlur 指令失去焦點是一個很好的方法。

讓我們應用上述步驟並在 Angular 應用程式中設定焦點。

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;
                }
            });
        }
    };
});

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 avatar Muhammad Adil avatar

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