如何在免費jqgrid中的內聯編輯中將焦點設置為自動完成內容

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標准制定為（請參閱此處）

用戶代理必須設置元素的tabindex焦點標志，但不應允許使用順序焦點導航來訪問元素。

如果不希望按鈕具有焦點，則應刪除tabindex屬性。

如果您沒有創建該屬性，但是它可以使用某些控件，但是您仍然不想將焦點設置在<button> ，那么您可以將焦點設置在另一個可編輯列上。 您可以使用focusField: "someColumnName"或focusField: indexOfSomeColumn來設置對特定列的焦點。

更新：我張貼修復這增加的使用.first()呼叫前.focus() 更改后，您發布的演示效果很好。

如何在免費jqgrid中的內聯編輯中將焦點設置為自動完成內容

問題描述

1 個解決方案

解決方案1
1 已采納 2015-12-15 10:41:05

如何在免費jqgrid中的內聯編輯中將焦點設置為自動完成內容

問題描述

1 個解決方案

解決方案1 1 已采納 2015-12-15 10:41:05

解決方案1
1 已采納 2015-12-15 10:41:05