KnockoutJS - hasFocus 绑定

更新于 2025/1/15 22:07:17

此绑定用于通过 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>