javascript - 使用 knockout.js 保持 HTML 中禁用元素的 Tab 键顺序

Question

请看一下这个简单的示例:http://jsfiddle.net/wassimmansour/9v8nbqww/ 。在输入“可选数据”中键入一些内容，然后按 Tab 键。

var ViewModel = function (opt, dep, oth) {
    this.optionalData = ko.observable(opt);
    this.dependantData = ko.observable(dep);
    this.otherData = ko.observable(oth);

    this.optionalDataPresent = ko.pureComputed(function () {
        return this.optionalData().trim() !== '';
    }, this);
};

ko.applyBindings(new ViewModel("", "", "123")); 

当“可选数据”为空时，我需要能够通过选项卡浏览并跳过“相关数据”输入字段。但如果“可选数据”不为空，则 Tab 键顺序必须跳转到“相关数据”，然后才能恢复到其余输入。

现在发生的情况是，“相关数据”获取仅在选项卡跳过它之后才启用，这不是预期或直观的流程。

这个问题有什么解决办法吗？

<小时/>

编辑

“可选数据”字段实际上必须格式化为“1,234.56”或“1,234.00”。我使用的代码是:

<input data-bind="masked: optionalData, mask: 'N2'" />

ko.bindingHandlers.masked = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var mask = allBindingsAccessor().mask || 'N2';
        var val = $(element).val();
        if (val || val == 0) {
            val = parseFloat((val + '').replace(/,/g, ''));
            if (!isNaN(val)) $(element).val(val.format(mask));
            else $(element).val('');
        }

        ko.utils.registerEventHandler(element, 'focusout', function () {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var mask = allBindingsAccessor().mask || 'N2';
        var val = value;
        if (val || val == 0) {
            val = parseFloat((val + '').replace(/,/g, ''));
            if (!isNaN(val)) {
                $(element).val(val.format(mask));
                return;
            }
        }
        $(element).val(value);
    }
};

我更新了 http://jsfiddle.net/wassimmansour/9v8nbqww/7/ 上的代码但它似乎在那里运行不正常。

我测试了“valueUpdate”解决方案，但它似乎与用于格式化的“update”功能冲突。一旦按下某个键，输入的值就会更新并应用格式化功能，这意味着每次按键后都会应用格式化。这使得数据输入变得不可能(如果您输入“1”，输入会立即更新为“1.00”，然后您必须手动将光标移回1之后，然后按2，然后输入也会被格式化并显示“12.00')。

谢谢。

Answer 1

这是更新代码:jsfiddle 。我建议在第一个字段上使用 valueUpdate: "keyup"。

<div class='liveExample'>Optional Data
    <br/>
    <input data-bind='value: optionalData, valueUpdate: "keyup"' />
    <br/>Dependent Data
    <br/>
    <input data-bind='value: dependantData, attr {disabled: !optionalDataPresent()}' />
    <br />Other Data
    <br/>
    <input data-bind='value: otherData' />
</div>