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.html
