Question

免费的jqgrid第一列是使用自定义编辑类型的Jquery UI自动完成。使用focusField: true

使字段可聚焦

$.extend(true,$.jgrid.inlineEdit, {
    position: "beforeSelected",
    focusField: true,
    keys: true } );

如果开始内联编辑，jqgrid会将焦点置于自动完成下拉按钮。如何解决这个焦点是自动完成输入元素？

使用tabindex = -1：

定义自动完成按钮

<button type='button' class='btn btn-default btn-form-dropdown' tabindex=-1 aria-label='Open menu'>
<span class='caret'></span></button>

如果在内联编辑中按下Tab键，则无法获得焦点。

jqgrid代码包含：

    getFocusable = function (elem) {
        return $(elem).find("input,textarea,select,button,object,*[tabindex]")
                                            .filter(":input:visible:not(:disabled)");
                                },

因此jqgrid将焦点放在元素上，即使它包含tabindex=-1

如何解决这个问题？

也在https://github.com/free-jqgrid/jqGrid/issues/186

中发布

更新

重现问题的步骤：

在Chrome中打开以下页面
选择行
点击内联编辑按钮

观察到的：

按钮获得焦点

预期：

输入元素应该获得焦点

重现的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" href="http://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="http://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
    <script>
        $(document).ready(function () {
            var mydata = [
                { id: 0, Name: "Indiana", Category: "IN" },
                { id: 1, Name: "California", Category: "CA" },
                { id: 2, Name: "Pennsylvania", Category: "PA" },
                { id: 3, Name: "Texas", Category: "TX" }
            ];
            var lastSel;
            var grid = $("#list");

            grid.jqGrid({
                data: mydata,
                datatype: 'local',
                colModel: [
                    {
                        name: 'Name', editable: true, width: 200,
                        edittype: 'custom',
                        editoptions: {
                            custom_element: combobox_element,
                            custom_value: function (elem) {
                                return elem.find("input").val();
                            }
                        }
                    },

                { name: 'Category', index: 'Category', width: 50, editable: true }
                ],
                ignoreCase: true,
                gridview: true,
                viewrecords: true,
                rownumbers: true,
                pager: '#pager',
                editurl: 'clientArray',
                ondblClickRow: function (id, ri, ci) {
                    grid.jqGrid('editRow', id, true, null, null, 'clientArray', {});
                },
                onSelectRow: function (id) {
                    if (id && id !== lastSel) {
                        if (typeof lastSel !== "undefined") {
                            grid.jqGrid('restoreRow', lastSel);
                        }
                        lastSel = id;
                    }
                }
            }).
            jqGrid("inlineNav", '#pager');
        });

        var getColumnByName = function (grid, columnName) {
            var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
            for (; i < l; ++i) {
                if (cm[i].name === columnName) {
                    return cm[i];
                }
            }
            return null;
        };

        function combobox_element(value, options) {
            var elemStr = '<div><input class="FormElement', newel, width;
            if (options.id === options.name) {
                elemStr += '" size="' +
                        options.size + '"' + ' id="' + options.id + '"';
            }
            else {
                elemStr += ' form-control jqgrid-inlineedit-autocomplete" ' +
                   ' style="width:' + width + 'px" ' + ' id="' + options.id + '_x"';
            }
            elemStr += ' value="' + value + '" lookup="' + options.lookup + '"/>';
            elemStr += "<button type='button' class='btn btn-default btn-form-dropdown' tabindex=-1 aria-label='Open menu'>" +
        "<span class='caret'></span></button>";
            elemStr += '</div>';
            newel = $(elemStr)[0];
            setTimeout(function () {
                input_autocomplete(newel);
            }, 50);
            return newel;
        }

        function input_autocomplete(newel) {
            var input = $("input", newel);
            input.autocomplete({
                source: ["Indiana", 
                "California",
                "Pennsylvania"
                ]
            }
           );
            $("button", newel)
            .bind({
                click: function () {
                    input.focus();
                }
            });
        }
    </script>
</head>

<body>
    <table id="list"></table>
    <div id="pager"></div>
</body>
</html>

Answer 1

我不确定你到底做了什么。代码的哪一部分放置<button type='button' ... tabindex=-1 ...？

tabindex=-1的放置仅表示如果用户按Tab或Shift-Tab，该字段不应该获得焦点，但这意味着该字段应该可以通过API调用获得焦点。在其他病房中，tabindex的存在使其可以聚焦，但tabindex的负值通知仅从顺序焦点导航中排除该元素。 W3标准将其表述为（见here）

用户代理必须设置元素的tabindex焦点标志，但应该不允许使用顺序焦点导航来到达元素。

如果一个人不想让按钮成为焦点，则应删除tabindex属性。

如果您没有创建属性并且它会对您使用的某些控件进行控制，但您仍然不想将焦点设置为<button>，那么您可以将焦点设置为另一个可编辑的专栏。您可以使用focusField: "someColumnName"或focusField: indexOfSomeColumn将焦点设置在特定列上。

更新：我发布了the fix，在调用.first()之前添加了.focus()的使用情况。更改后，您发布的演示效果很好。

如何在自由jqgrid中将焦点设置为内联编辑中的自动完成内容

1 个答案: