使用基因敲除.js使HTML中的制表符顺序保持禁用状态

debugcn 发表于 Dev

瓦西姆

请看一下这个快速示例：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"));

当“可选数据”为空时，我需要能够浏览并跳过“从属数据”输入字段。但是，如果“可选数据”不为空，则制表符顺序必须跳至“从属数据”，然后才能恢复其余输入。

现在正在发生的事情是仅在选项卡跳过该选项后才启用“从属数据”，这不是预期的或直观的流程。

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

编辑

实际上，“可选数据”字段的格式必须为“ 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'）。

谢谢你。

帖木儿·奥萨奇（Timur Osadchiy）

这是更新代码：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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。