javascript - 在表格或 div 元素上使用 hasFocus 绑定(bind)

Question

所以基本上我有这个输入文本框:

 <input id="usersInputField" data-bind="hasFocus: isSearchInputFocused"/>

只要输入字段获得焦点，就会弹出一个表格:

<div data-bind="visible: isSearchInputFocused">
   <table>
       <tbody data-bind="foreach: usersFromSearch">
           <!-- some info -->
       </tbody>
   </table>
</div>

...效果很好。虽然，我希望表格保持可见，以防用户也单击 div。

我尝试使用 ko.computed observable，而不是表绑定(bind)中的 isSearchInputFocused observable，如果文本框或用户表获得焦点，它会返回 true 并且在其上添加了一个 hasFocus 绑定(bind)，但这似乎不起作用。我假设 hasFocus 绑定(bind)优先于 click 绑定(bind)。

当表格或输入有焦点时，如何保持 div 打开？

Answer 1

默认情况下，表格不可聚焦，因此您的第一个想法将行不通。但是，如果添加 tabindex 属性，则可以安全地将焦点设置在表格上。因此，如果这样做，您可以为每个元素使用一个可观察焦点，并使用一个计算来确定它们中的任何一个是否聚焦以保持 div 可见。

var vm = {
  inputHasFocus: ko.observable(),
  tableHasFocus: ko.observable(),
};

// Don't take completing a model like this as a good practice:
vm.somethingHasFocus = ko.pureComputed(function() {
  var inputHasFocus = vm.inputHasFocus(); // ensures subscription
  var tableHasFocus = vm.tableHasFocus(); // ensures subscription
  return  inputHasFocus || tableHasFocus;
}, vm);

ko.applyBindings(vm);

// IE Hack
$('table *').on('click', function() { vm.tablehasFocus(true); })

table {
  border: solid 1px black;
  border-collapse: true;
  width: 80%;
  margin: 20px 0;
}

*:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
  outline: none;
}

div {
  background-color: silver;
  margin: 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input tabindex="0" type="text" data-bind="hasFocus: inputHasFocus"/>


<table tabindex="1" data-bind="hasFocus: tableHasFocus">
  <tr>
    <td>I'm a table cell</td>
    <td>I'm another</td>
  <tr>
</table>

<div data-bind='visible: inputHasFocus'>Input has focus</div>
<div data-bind='visible: tableHasFocus'>Table has focus</div>
<div data-bind='visible: somethingHasFocus'>Something has focus</div>

注意:IE 通常有一个奇怪的行为:至少 IE10 允许关注表格单元格。脚本中包含的解决方案是 hack。还有更聪明的选择:

• 创建一个自定义绑定(bind) elementOrDescendantHasFocus，这应该不会太难:您可以使用委托(delegate)事件处理来检测表或子项中的焦点事件
• 为每个表格单元格创建一个 hasFocus 数组，以及一个依赖于它们的计算(我宁愿实现 hack)
• 通过向它们添加负的 tabindex 属性使单元格无法聚焦

因此，如果您必须支持 IE(至少 IE10)，请选择这些解决方案中的任何一个，包括 hack。在 Chrome 和 Firefox 中没有这个问题