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

打印页面