KnockoutJS - hasFocus 繫結

此繫結用於透過 ViewModel 屬性手動設定 HTML DOM 元素的焦點。這也是一種雙向繫結方法。當元素從 UI 獲得焦點時，ViewModel 屬性的布林值也隨之改變，反之亦然。

語法

hasFocus: <binding-value>

引數

如果引數求值為 true 或類似 true 的值（例如整數、非空物件或非空字元），則 DOM 元素獲得焦點，否則則失去焦點。
當用戶手動獲取或失去元素的焦點時，布林 ViewModel 屬性也會相應地改變。
如果引數可觀察，則在基礎可觀察物件更改時，元素值會獲得或失去焦點。如果不使用可觀察物件，則只處理元素一次。

示例

讓我們看以下示例，演示如何使用 hasFocus 繫結。

線上演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS hasFocus Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Enter primary contact number : <input data-bind = "
         value: primaryContact,
         hasFocus: contactFlag,

         style: { 
            'background-color': contactFlag() ? 'pink' : 'white' 
         } " />
         
      </p>

      <button data-bind = "click: setFocusFlag">Set Focus</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.primaryContact = ko.observable();
            this.contactFlag = ko.observable(false);

            this.setFocusFlag = function() {
               this.contactFlag(true);
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，以瞭解上面的程式碼如何工作 -

將上述程式碼儲存在 hasfocus-bind.htm 檔案中。
在瀏覽器中開啟此 HTML 檔案。
單擊“設定焦點”按鈕，將焦點設定在文字框上。
設定焦點後，文字框的背景色會發生改變。

knockoutjs_declarative_bindings.htm

列印頁面