对包含表单的div的聚焦输出进行敲除绑定

时间:2013-07-28 20:38:38

标签: knockout.js

我正在尝试在ko文档for the has focus binding中实现一种简单示例1所做的事情,但是应用于包含表单的div,只是在一个方向上就可以了

在下面的代码中使用focusout我面临的问题是,一旦focusOnDiv设置为true,如果我从一个输入更改为另一个输入,则触发事件并返回false。我期待不被触发,因为它在div内。我可以在相同的事件绑定中使用focusin将其设置为true,就像在小提琴中一样,但我怀疑这个解决方案是否可以接受

HTML:

<div tabindex ="-1" class="parentdiv" data-bind="event: { focusout: resetFocusOnDiv}">
     <p><div>Just a div</div></p>
     <p><span>And a span</span></p>
     <p><select>
         <option>First</option>
         <option>Second</option>
         </select>
     </p>
     <input type="checkbox">Checkbox</input>
    <p><input data-bind="value: firstValue" /></p>
    <p><input data-bind="value: secondValue" /></p>
</div>
<div data-bind="text: focusOnDiv"></div>
<input type="button" data-bind="click: setFocusOnDiv" value="Click">

JS:

var viewModel = function() {
    var self= this;

    self.firstValue = ko.observable('a');
    self.secondValue = ko.observable('b');

    self.focusOnDiv = ko.observable(false);

    self.setFocusOnDiv = function(){
        self.focusOnDiv(true);
    };

    self.resetFocusOnDiv = function(){
        self.focusOnDiv(false);
    };
};


ko.applyBindings(new viewModel());

小提琴here

1 个答案:

答案 0 :(得分:0)

如果我正确理解了这个问题,你想在点击按钮时点击一个元素。您可以使用焦点功能完成此任务:

<input type="button" data-bind="click: focusDiv" value="Click">

self.focusDiv = function(){
     $('#focusId').focus();
};