如何使jqgrid高级搜索对话框键盘可访问

中的答案描述了如何在jqgrid高级搜索对话框中启用enter键和其他键

---

在高级搜索对话框中单击“添加组”、“添加子组”、“删除规则”或“删除组”按钮后，Enter键和其他键仍然被忽略。如何将焦点设置为“添加元素”或“删除剩余元素后”以启用Enter键和其他键？

当前版本的高级搜索对话框（请参阅

grid.filter.js

中的

jqFilter

的定义）重新创建更改某人时对话框的所有控件。请参见以下代码：

this.reDraw=函数（）{
$（“table.group:first”，this.remove（）；
var t=this.createTableForGroup（p.filter，null）；
$（此）。追加（t）；
if（$.isFunction（此.p.afterRedraw））{
this.p.afterRedraw.call（this，this.p）；
}
};

如何看到第一行

$（“table.group:first”，this.remove（）删除所有筛选器的内容。当前的焦点将丢失，其中一个将出现您描述的问题

我建议使用document.activeElement元素修复
重画的代码，该元素最初在Internet Explorer中引入（至少在IE4中），现在在所有web浏览器中都支持，因为它是HTML5标准的一部分（请参阅）。最初具有焦点的元素将被销毁，以后将无法对其设置焦点。因此，我建议保存元素的元素名称及其类（如
input.add group
或
input.add rule.ui add
），并在搜索对话框中查找元素的位置。稍后，在重新创建对话框元素之后，我们将在具有相同索引的元素上设置焦点

我建议将
重画的代码更改为以下代码

this.reDraw=函数（）{
var activeElement=document.activeElement，选择器，$dialog，activeIndex=-1，$newElem，$buttons，
按钮类，
getButtonClass=函数（类名）{
var arClasses=['add-group'，'add-rule'，'delete-group'，'delete-rule']，i，n，className；
对于（i=0，n=classNames.length；i=0）{
返回类名；
}
}
返回null；
};
if（activeElement）{
选择器=activeElement.nodeName.toLowerCase（）；
buttonClass=getButtonClass（activeElement.className.split（“”））；
如果（按钮类！==null）{
选择器+='。+按钮类；
如果（选择器==“输入.删除规则”）{
$buttons=$（activeElement.closest（'table.group'））
.find（'input.add规则，input.delete规则'）；
activeIndex=$buttons.index（activeElement）；
如果（activeIndex>0）{
//查找上一个“添加规则”按钮
while（activeIndex--）{
$newElem=$（$buttons[activeIndex]）；
if（$newElem.hasClass（“添加规则”））{
activeElement=$newElem[0]；
选择器=activeElement.nodeName.toLowerCase（）+”+
getButtonClass（activeElement.className.split（“”））；
打破
}
}
}
}else if（选择器==“输入.删除组”）{
//将焦点更改为父组的“添加规则”
$newElem=$（activeElement.closest（'table.group'））
.parent（）
.closest（'table.group'）
.find（'input.add rule'）；
如果（$newElem.length>1）{
activeElement=$newElem[$newElem.length-2]；
选择器=activeElement.nodeName.toLowerCase（）+”+
getButtonClass（activeElement.className.split（“”））；
}
}
$dialog=$（activeElement.closest（.ui jqdialog））；
activeIndex=$dialog.find（选择器）.index（activeElement）；
}
}
$（“table.group:first”，this.remove（）；
$（this.append）（this.createTableForGroup（this.p.filter，null））；
if（$.isFunction（此.p.afterRedraw））{
this.p.afterRedraw.call（this，this.p）；
}
如果（activeElement&&activeIndex>=0）{
$newElem=$dialog.find（选择器+”：eq（“+activeIndex+”）；
如果（$newElem.length>0）{
$newElem.focus（）；
}否则{
$dialog.find（“input.addrule:first”）.focus（）；
}
}
};

正如人们在搜索对话框中看到的，按下“添加子组”或“添加规则”按钮后，焦点保持不变。如果按“删除组”，我在上一行组的“添加规则”按钮上设置

使用jQuery UI样式的按钮和按钮中的文本（请参阅）。单击“删除”（规则或组）按钮后，我试图将焦点设置为上一个“添加规则”按钮，因为将焦点设置在另一个“删除”（规则或组）按钮上会很危险

另外，在我使用的演示中

afterShowSearch:function（$form）{
var$lastInput=$form.find（“.input-elm:last”）；
如果（$lastInput.length>0）{
$lastInput.focus（）；
}
}

因为在对话框打开时将初始焦点设置在最后一个输入字段上似乎很有意义

已更新：我发现将焦点设置在当前单击的按钮“添加子组”、“添加规则”或“删除组”上更有意义。我们看到的优点是，首先用鼠标单击某个按钮，然后用键盘继续工作。所以我建议改变

inputAddSubgroup.bind（'click'，function（）{

到

inputAddSubgroup.bind（'click'，函数（e）{