开发者

How to regain focus for an ajax drop-down element in IE?

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) {
    interv开发者_如何学Goal = 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.


I think you should use onblur event of dropdown instead of onchange, it will be the right solution, if I've understood you correctly.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜