hasFocus: <binding-value>
优质
小牛编辑
132浏览
2023-12-01
此绑定用于通过ViewModel属性手动设置HTML DOM元素的焦点。 这也是一种双向绑定方法。 当元素从UI聚焦时，ViewModel属性的布尔值也会更改，反之亦然。
语法 (Syntax)
hasFocus: <binding-value>
参数 (Parameters)
如果参数的计算结果为true或类似true（例如Integer或非null对象或非空字符串），那么DOM元素将被聚焦，否则它将无法聚焦。
当用户手动聚焦或未聚焦元素时，布尔ViewModel属性也会相应地更改。
如果参数是可观察的，那么当基础可观察量发生变化时，元素值将被聚焦或未聚焦。 如果没有使用可观察的元素，则只处理一次元素。
例子 (Example)
让我们看一下下面的例子，它演示了如何使用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>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在hasfocus-bind.htm文件中。
在浏览器中打开此HTML文件。
单击“设置焦点”按钮以将焦点设置在文本框上。
在设置焦点时，文本框的背景颜色会发生变化。