【发布时间】：2023-03-05 06:43:01
【问题描述】：
免费 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>
【问题讨论】：
标签： javascript jquery autocomplete jqgrid free-jqgrid