Javascript 在表或div元素上使用hasFocus绑定

基本上我有一个输入文本框：

 <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来代替表绑定中的isSearchInputFocused observable，如果文本框或用户表被聚焦并在其上添加了hasFocus绑定，它将返回true，但这似乎不起作用。我假设hasFocus绑定的优先级高于click绑定

---

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

idk，如果您想这样做，但可以使其在输入焦点处打开，并保持打开状态，直到您关闭它

//这是我的数据模型 var ViewModel=函数{ var self=这个； self.focusMePlease=ko.observefalse； self.focusMePlease.subscriptbefunction{ 如果self.focusMePlease==true{ self.isearchinputtefocusedtrue； } }; self.isSearchInputFocused=ko.observefalse； self.close=函数{ self.isearchinputFocusedFalse； }; }; ko.applybindingsnewviewmodel； 运输署{ 边框：1px纯黑； 填充物：5px； } 东西 X

---

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

var vm={ inputHasFocus:ko.可观察， tableHasFocus:ko.可观察， }; //不要将完成这样的模型视为良好实践： vm.somethingHasFocus=ko.pureComputedfunction{ var inputHasFocus=vm.inputHasFocus；//确保订阅 var tableHasFocus=vm.tableHasFocus；//确保订阅 返回puthasFocus | | tableHasFocus； }，vm； ko.applyBindingsvm； //哈克 $'table*'。单击时，函数{vm.tablehasFocustrue；} 桌子{ 边框：实心1px黑色； 边界崩溃：正确； 宽度：80%； 利润率：20px0； } *：焦点{ 边框颜色：FF0000； 框阴影：插入0 1px 1px rgba0,0,0,0.075,0 0 8px rgba255,0,0,0.6； 大纲：无； } div{ 背景颜色：银色； 利润率：20px0； } 我是一个桌上牢房 我是另一个 输入有焦点 表有焦点

---

有些东西有焦点也许你可以使用焦点事件来解决这个问题，例如：

---

非常感谢你的回答！我决定使用这个，因为只有当表本身或输入字段被聚焦时，表才保持可见。我刚刚在我的div上添加了data bind='visible:inputHasFocus | | tableHasFocus'，现在工作起来很有魅力！干杯很高兴它对你有用。但是，禁止在绑定中包含表达式；您更希望创建一个依赖于这两个属性的pureComputed，并在绑定中使用它。如果您很快习惯于在视图模型中进行这些操作，那么您将来就不会尝试进行复杂的绑定。我可以保证，当您开始使用复杂绑定时，事情会变得复杂。此外，你不能像使用viemodel一样轻松地调试它们。我发现IE10有一个问题。我已经更新了我的答案是的！我还需要IE的支持。我首先尝试了黑客攻击，但得到了一个“对象不支持属性或方法”tableHasFocus。消极的tabindex解决方案对我也不起作用。我还没有进入定制绑定。所以我实现了“hasFocus on every cell”方法。非常感谢！我欠你的债：我的错。我在使用IE黑客时输入了一个错误！