如何在 IE 中重新获得 ajax 下拉元素的焦点？

发布于 2024-12-04 18:36:22 字数 1127 浏览 0 评论 0原文

我有一个下拉元素，它呈现为普通的 HTML 元素。每次更改时，下拉元素都会使用 ajax 提交自身。问题是我需要为页面实现特定的选项卡顺序。为了防止 ajax 调用返回时丢失信息的挫败感，我添加了一个屏幕禁用程序，它可以阻止任何用户交互，直到 ajax 调用返回。还值得注意的是，根据下拉列表的值，下一个 Tab 键顺序元素有时会被禁用。

现在，在 Firefox 和 Chrome 上一切正常，因为当用户离开字段时会触发“更改”事件：他按下选项卡，屏幕禁用器弹出并要求稍等一下，在 ajax 完成后，我的 javascript 处理选项卡顺序正确的下一个元素。

然而，IE8/7 也有自己的问题。在 IE 中，下拉菜单的“更改”事件的触发方式与 Firefox / Chrome 上不同。每次值发生变化时都会触发它。因此，在屏幕禁用器消失后，我需要再次将注意力集中到相同的下拉菜单，因为用户可能使用向上或向下箭头键来更改值，并且他可能愿意向上/向下下拉菜单再次菜单。

我尝试使用 Primefaces 和 jQuery 的功能在 Ajax 回调返回时运行某些 javascript。然而，效果并不好。有时下拉菜单获得了焦点，但随后它就失去了焦点。我尝试使用 javascript 的超时，但是，下拉元素以某种方式获得了“不完整”焦点：按“Tab”键跳转到页面顶部，按向上或向下箭头键用于跳出下拉菜单而不是改变它的值。

我的最终解决方案（遗憾的是，仍然不可接受）如下（id 是“选择”元素的 id）：

if (jQuery.browser.msie || jQuery.browser.opera) {
    interval = setInterval(function (){
       if (document.activeElement.id != id) {
           document.getElementById(id).focus();
        } else {
            clearInterval(interval);
    }
    }, 500); 
}

这将获得“完全”焦点，并且 TAB 和向上/向下箭头键的行为符合预期。然而，在速度稍慢的计算机上，使用向上/向下键更改值会排队太多间隔，有时网站会变得不可用。焦点不断跳回下拉列表，用户必须等待 10 秒或更长时间才能清除间隔。

所以想请教一下这个问题有更好的解决办法。

原文

I have a drop down element which is rendered as a usual HTML element. The drop down element submits itself using ajax on every change. The problem is that I need to implement a specific tabbing order for the page. In order to prevent frustration of losing information when ajax call comes back, I added a screen-disabler which prevents any user interaction until ajax call comes back. It also worth noting that the next tabbing order element is sometimes disabled depending on the value of the drop-down.

Now, everything works fine on Firefox and Chrome because 'change' event is fired when a user leaves the field: he presses tab, screen disabler pops up and asks to wait a bit, and after ajax is finished my javascript handles the tab order of the next element correctly.

However, here comes IE8/7 with its own problems. In IE 'change' event for drop-down is fired differently then on Firefox / Chrome. It is fired on every single change of the value. Hence, after the screen disabler fades off, I need to focus back to the same drop down menu again because the user might have used UP or DOWN arrow keys to change the value and he might be willing to go up/down the drop-down menu again.

I tried using Primefaces' and jQuery's features to run certain javascript when Ajax callback come back. However, it did not work well. Sometimes the drop-down got focused but straight afterwards it lost focus. I tried using javascript's timeouts, however, the drop-down element somehow gained 'not full' focus: pressing a 'Tab' key jumped to the top of the page and pressing UP or DOWN arrow keys used to jump out of the drop-down instead of changing its value.

My final solution (sadly, still not acceptable) was as follows (id is the id of the 'select' element):

if (jQuery.browser.msie || jQuery.browser.opera) {
    interval = setInterval(function (){
       if (document.activeElement.id != id) {
           document.getElementById(id).focus();
        } else {
            clearInterval(interval);
    }
    }, 500); 
}

This gets the 'full' focus and the TAB and UP/DOWN arrows keys behave as expected. However, on a bit slower computers using UP/DOWN keys to change the values queues up too many intervals and sometimes the website becomes unusuable. The focus just keeps jumping back to drop-down and user has to wait for 10 or more seconds for intervals to be cleared.

So, I would like to ask for a better solution for this problem.

分享到QQ

分享到微博