jQuery mouseover disables ability to hit return at end of password to login

Question

Internet Explorer is the browser of choice for PeopleSoft but does not support :hover. To mimic :hover on a Sign In button I added the following script:

$(function(){
    $(".fg-button:not(.ui-state-disabled)")
    .hover(
    function(){ 
            $(this).addClass("ui-state-hover"); 
        },
        function(){ 
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
            $(this).parents('.fg-buttonset-single:first').find(".fgbutton.ui-stat e-active").removeClass("ui-state-active");
        if( $(this).is('.ui-state-active.fg-button-toggleable, .fg-buttonset-multi .ui-state-active') ){ $(this).removeClass("ui-state-active"); }
        else { $(this).addClass("ui-state-active"); }   
    })
    .mouseup(function(){
        if(! $(this).is('.fg-button-toggleable, .fg-buttonset-single .fg-button, .fg-buttonset-multi .fg-button') ){
        $(this).removeClass("ui-state-active");
        }
    });
});

which goes with the following html

    <button class="fg-button ui-state-default ui-corner-all" type="button" name="Submit" onClick="submitAction(document.login)">Sign In</button>

Only now instead of striking enter once you have completed your password, and you are automatically logged in without needing to hit the Sign In button as many developers do - you must now click on the Sign In button to initiate the Sign In process. This has created much angst to those who do not want to click the Sign In button. No good accessibility deed goes unpunished.

The complete code is at http://jsfiddle.net/maniator/2NCHd/1/

Nothing a little more jQuery won't fix: http://stackoverflow.com/questions/155188/trigger-button-click-with-javascript-on-enter-key-in-text-box/155263#155263 — Kevin Stricker, Jul 05 '11 at 22:52

score 0 · Answer 1 · answered Jul 06 '11 at 14:02

IE 7 and higher support :hover on arbitrary elements, as long as the browser is in standards mode rather than quirks mode -- just make sure you've got the right doctype enabled. See Getting :hover to Work in IE 7.

If you still have to support IE 6, my heart goes out to you. In that case you could try adding the whatever:hover browser behavior. Personally, in this instance I would switch to a strict doctype for IE 7+ support and use a conditional comment to apply the browser behavior only to IE 6.

And, as @mootinator commented above, you could always add more JavaScript to trigger a form submit when somebody presses enter while the focus is in the form fields.

jQuery mouseover disables ability to hit return at end of password to login

1 Answers1