如何使jqgrid高级搜索对话框键盘可访问 [英] how to make jqgrid advanced search dialog keyboard accessible
问题描述
在>如何在jqgrid高级搜索窗口中启用输入的答案描述了如何在jqgrid高级搜索对话框中启用enter键和其他键.
Answer in how to enable enter in jqgrid advanced search window describes how to enable enter and other keys in jqgrid advanced search dialog.
在高级搜索对话框中，单击添加组"，添加子组"，删除规则"或删除组"按钮后，仍然会忽略其他键.如何将焦点设置为添加元素或删除其余元素以启用Enter和其他键?
After clicking Add group, Add subgrup, Delete rule or Delete group button in advanced search dialog Enter and other keys are still ignored. How set focus to added element or after delete remaining element to enable Enter and other keys?
推荐答案
高级搜索"对话框的当前版本(请参见grid.filter.js中的jqFilter定义)重新创建更改某人的对话.参见
The current version of the Advanced Searching dialog (see definition of jqFilter in the grid.filter.js) recreate all controls of the dialog on change of someone. See the code of reDraw which looks
this.reDraw = function() {
$("table.group:first",this).remove();
var t = this.createTableForGroup(p.filter, null);
$(this).append(t);
if($.isFunction(this.p.afterRedraw) ) {
this.p.afterRedraw.call(this, this.p);
}
};
如何看到第一行$("table.group:first",this).remove();删除所有过滤器的内容.当前的焦点将会丢失，其中一个会遇到您所描述的问题.
How one can see the first line $("table.group:first",this).remove(); delete the content of all filter. The current focus will be lost and one have the problems which you described.
我建议使用document.activeElement元素来修复reDraw的代码，该元素最初是Internet Explorer中引入的(至少在IE4中是这样)，并且由于它是HTML5标准的一部分，现在在所有Web浏览器中都受支持(请参见此处).最初具有焦点的元素将被销毁，以后将无法对其进行设置.因此，我建议保存元素及其类的元素名称(如input.add-group或input.add-rule.ui-add)，并在搜索对话框中查找元素的位置.稍后，在重新创建对话框元素之后，我们将焦点放在具有相同索引的元素上.
I suggest to fix the code of reDraw using document.activeElement element which was introduced in Internet Explorer originally (at least in IE4) and which is supported now in all web browsers because it's part of HTML5 standard (see here). The element which has focus originally will be destroyed and one will unable to set focus on it later. So I suggest to save the element name of the element and it's classes (like input.add-group or input.add-rule.ui-add) and to find the position of the element on the searching dialog. Later, after the dialog element will be recreated we'll set focus on the element with the same index.
我建议将reDraw的代码更改为以下
I suggest to change the code of reDraw to the following
this.reDraw = function() {
var activeElement = document.activeElement, selector, $dialog, activeIndex = -1, $newElem, $buttons,
buttonClass,
getButtonClass = function (classNames) {
var arClasses = ['add-group', 'add-rule', 'delete-group', 'delete-rule'], i, n, className;
for (i = 0, n = classNames.length; i < n; i++) {
className = classNames[i];
if ($.inArray(className, arClasses) >= 0) {
return className;
}
}
return null;
};
if (activeElement) {
selector = activeElement.nodeName.toLowerCase();
buttonClass = getButtonClass(activeElement.className.split(' '));
if (buttonClass !== null) {
selector += '.' + buttonClass;
if (selector === "input.delete-rule") {
$buttons = $(activeElement).closest('table.group')
.find('input.add-rule,input.delete-rule');
activeIndex = $buttons.index(activeElement);
if (activeIndex > 0) {
// find the previous "add-rule" button
while (activeIndex--) {
$newElem = $($buttons[activeIndex]);
if ($newElem.hasClass("add-rule")) {
activeElement = $newElem[0];
selector = activeElement.nodeName.toLowerCase() + "." +
getButtonClass(activeElement.className.split(' '));
break;
}
}
}
} else if (selector === "input.delete-group") {
// change focus to "Add Rule" of the parent group
$newElem = $(activeElement).closest('table.group')
.parent()
.closest('table.group')
.find('input.add-rule');
if ($newElem.length > 1) {
activeElement = $newElem[$newElem.length-2];
selector = activeElement.nodeName.toLowerCase() + "." +
getButtonClass(activeElement.className.split(' '));
}
}
$dialog = $(activeElement).closest(".ui-jqdialog");
activeIndex = $dialog.find(selector).index(activeElement);
}
}
$("table.group:first",this).remove();
$(this).append(this.createTableForGroup(this.p.filter, null));
if($.isFunction(this.p.afterRedraw) ) {
this.p.afterRedraw.call(this, this.p);
}
if (activeElement && activeIndex >=0) {
$newElem = $dialog.find(selector + ":eq(" + activeIndex + ")");
if ($newElem.length>0) {
$newElem.focus();
} else {
$dialog.find("input.add-rule:first").focus();
}
}
};
就像人们可以在
Like one can see on the next demo the focus in the Searching Dialog stay unchanged after pressing on the "Add subgroup" or "Add rule" buttons. I set it on the "Add rule" buttons of the previous row group in case of pressing "Delete group".
另一个演示使用jQuery UI样式的按钮和按钮中的文字(请参见答案).在单击删除"(规则或组)按钮后，我尝试将焦点设置为先前的添加规则"按钮，因为将焦点设置在另一个删除"(规则或组)按钮上我觉得很危险.
One more demo use jQuery UI style of the buttons and the texts in the buttons (see the answer). After clicking on the "Delete" (rule or group) button I tried to set the focus to the previous "Add Rule" button because setting of the focus on another "Delete" (rule or group) button I find dangerous.
另外，在我使用的演示中
Additionally in the demo I use
afterShowSearch: function ($form) {
var $lastInput = $form.find(".input-elm:last");
if ($lastInput.length > 0) {
$lastInput.focus();
}
}
因为在对话框打开时将初始焦点放在最后一个输入字段上似乎很有意义.
because it seems me meaningful to set initial focus on the last input field at the dialog opening.
已更新:我发现将重点放在当前单击的按钮添加子组"，添加规则"或删除组"上还有其他意义.人们看到的好处是，先用鼠标单击某个按钮，然后再继续用键盘工作.因此，我建议更改该行
UPDATED: I find additionally meaningful to set focus on the current clicked buttons "Add subgroup", "Add rule" or "Delete group". The advantage one sees in the case it one first click some button with the mouse and then want to continue the work with keyboard. So I suggest to change the line
inputAddSubgroup.bind('click',function() {
到
inputAddSubgroup.bind('click',function(e) {
$(e.target).focus();
要更改该行
inputAddRule.bind('click',function() {
到
inputAddRule.bind('click',function(e) {
$(e.target).focus();
和该行
inputDeleteGroup.bind('click',function() {
到
inputDeleteGroup.bind('click',function(e) {
$(e.target).focus();
和该行
ruleDeleteInput.bind('click',function() {
到
ruleDeleteInput.bind('click',function(e) {
$(e.target).focus();
这篇关于如何使jqgrid高级搜索对话框键盘可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
