Using Knockout hasFocus bindings, how do I track the focus of a switch group?

I am using knockout js and I have some switches that I have applied snapping hasFocusto so that I can track which control has focus. But this does not work for switches.

You can check what happens in this fiddle:

https://jsfiddle.net/qttxfvqs/1/

The focus of the observed text field works fine, but the radio buttons don't. I get even weirder results if there are only 2 switches.

Html:

<div><input type="text" data-bind="hasFocus: textFocus" /></div>

<div>    
    <label for="option1">
        <input type="radio" id="option1" name="options" value="option1" data-bind="hasFocus: radioFocus" checked />
        Option 1
    </label>
</div>

<div>
    <label for="option2">
        <input type="radio" id="option2" name="options" value="option2" data-bind="hasFocus: radioFocus" />
        Option 2
    </label>    
</div>

<div>
    <label for="option3">
        <input type="radio" id="option3" name="options" value="option3" data-bind="hasFocus: radioFocus" />
        Option 3
    </label>    
</div>

<hr />

<dl>
    <dt>Text box has focus</dt>
    <dd data-bind="text: textFocus">-</dd>

    <dt>Radio buttons have focus</dt>
    <dd data-bind="text: radioFocus">-</dd>
</dl>

JS:

var m = function() {

    this.textFocus = ko.observable(true);
    this.radioFocus = ko.observable(false);

};

ko.applyBindings(new m());

How to fix it? I want it to radioFocusbe right if any of the switches has focus, otherwise false.

+4
1

, ; . , hasFocus . .

<div>    
    <label for="option1">
        <input type="radio" id="option1" name="options" value="option1" data-bind="hasFocus: radioFocus1" checked />
        Option 1
    </label>
</div>

<div>
    <label for="option2">
        <input type="radio" id="option2" name="options" value="option2" data-bind="hasFocus: radioFocus2" />
        Option 2
    </label>    
</div>


var m = function() {

    this.textFocus = ko.observable(true);
    this.radioFocus1 = ko.observable(false);
    this.radioFocus2 = ko.observable(false);

};

.

, , - , . , , bound true? ?

+2

Source: https://habr.com/ru/post/1584938/


All Articles