用户界面焦点错误,焦点跳回选项卡后最后编辑的文本框

我有一个讨厌的,有点奇怪的虫子。我在knockout中有一个网格,它有几列,其中一列是可编辑的。此列为每行生成一个文本框输入。

当用户编辑一行,然后在下一行上添加制表符时,焦点将跳回刚刚编辑的行。这种情况只会发生一次,所以如果您再次点击,您可以点击下一个框。

如果不编辑文本框,则不会发生回跳行为。我很难看出到底是什么导致了这种行为。

视图中淘汰网格的代码:

<table class="table table-responsive table-striped center table-hover" style="clear: both; margin-bottom: 10px;" id="resultsTable">
                <thead>
                    <tr>
                        <th class="col-md-2"><b>Culture</b></th>
                        <th class="col-md-2"><b>Section</b></th>
                        <th class="col-md-2"><b>Name</b></th>
                        <th class="col-md-2"><b>Value</b></th>
                        <th class="col-md-2"><b>LastChangeOn</b></th>
                        <th class="col-md-2"></th>
                    </tr>
                </thead>
                <tbody data-bind='foreach: Items'>
                    <tr>
                        <td class="col-md-2">
                            <span data-bind="text: Culture"></span>
                        </td>
                        <td class="col-md-2">
                            <span data-bind="text: Section"></span>
                        </td>
                        <td class="col-md-2">
                            <span data-bind="text: Name"></span>
                        </td>
                        <td class="col-md-2">
                            <input type="text" data-bind="value: Value" />
                        </td>
                        <td class="col-md-2">
                            <span data-bind="text: LastChangeOn"></span>
                        </td>
                        <td class="col-md-2">
                            <span data-bind="text: Id, visible: false"></span>
                        </td>
                    </tr>
                </tbody>
            </table>

javascript代码:

<script type="text/javascript">
var _VM;
var initialLoad = true;

$(function () {
    LoadKnockoutContent(true);
});

$("#SearchButton").on("click", function (e) {
    _VM.moveToFirstPage();
});

IndexModel = function (initialData) {
    var _self = this;

    PagedViewModel.call(_self);

    _self.Items = ko.observableArray();

    _self.CurrentPage.subscribe(function (value) {
        $("#SearchCriteria_HiddenPage").val(value);

        LoadKnockoutContent(false, _self.Release);
    });

    _self.loadModelData = function (data) {
        _self.CurrentPage(data.CurrentPage);
        _self.PageSize = data.PageSize;
        _self.MaxPageIndex(data.PageCount);
        _self.Items(ToResourcesArray(data.Resources, _self));
    }

    _self.loadModelData(initialData);
};

ResourceModel = function (item, parent) {
    var _self = this;

    _self.Parent = parent;
    _self.Id = item.Id;
    _self.Culture = ko.observable(item.Culture);
    _self.Section = ko.observable(item.Section);
    _self.Name = ko.observable(item.Name);
    _self.Value = ko.observable(item.Value);

    _self.Value.subscribe(function (newValue) {
        // Send the new value to the backend
        SaveResource(newValue, item.Id);
    });

    if (!item.LastChangeOn == "") {
        _self.LastChangeOn = ko.observable(parseJsonDate(item.LastChangeOn).toPaddedDateTimeString());
    }
    else {
        _self.LastChangeOn = ko.observable(item.LastChangeOn);
    }
}

function ToResourcesArray(data, parent) {
    var items = ko.utils.arrayMap(data, function (item) {
        return new ResourceModel(item, parent);
    });

    return items;
}

    function LoadKnockoutContent(initialLoad, callback, callback2) {
    // Call to the back end, passing along the search criteria
    }

    function SaveResource(newValue, Id) {
        $.ajax({
            url: '@Url.Action("UpdateResource", "Resource")',
            data: JSON.stringify({ id: Id, newValue: newValue }),
            type: 'POST',
            cache: false,
            contentType: 'application/json;',
            dataType: 'json',
            success: function (data) {
                if (data.isSuccess) {
                    // Success, we need to reload here as well else the last changed on field is not updated in the grid overview
                    LoadKnockoutContent(false);
                } else {
                    alertify.error(data.message);
                    // Refresh the view else the value field will stay empty while it is not saved.
                    // A reload will show the grid again with the previous value.
                    LoadKnockoutContent(false);
                }
            },
            error: function (request, status, error) {
                alert(request.responseText);
            }
        });
    }
</script>

尽职调查