1

I've got a page with a bunch of little forms. I want to dynamically assign a hotkey to submit each form. The code looks like:

HTML

<form:form id="formCtrlr" action="review.html">
    <input name="id" type="hidden" value=""/>
</form:form>
<form:form id="formCtrls" action="save.html">
    <input name="id" type="hidden" value=""/>
</form:form>

...lots of other little forms like this each with a unique id related to the hotkey...

jQuery

$('[id^="formCtrl"]').each(function() {
    var me = $(this);
    var myId = me.attr("id");
    var keyBinding = myId.replace("form", "").replace(/(.{4})/g,"$1+");

    $(document).bind('keydown', keyBinding, function (evt){ 
        evt.stopPropagation();
        evt.preventDefault();
        $("#"+myId).submit();
        return false;
    });
});

Simple right? But there are also several text inputs on the page and if the user is typing in one of those fields and hits one of the hotkeys, the corresponding form is not submitted and in fact if the hotkey matches something for the browser like Ctrl-s the save dialog is shown. Any idea how I can stop this from happening?

7
  • Unbind it on form element focus and rebind it on blur? Sep 2, 2011 at 14:10
  • 1
    I would guess that the hotkey event is being captured by the input and then blocked. Try adding the event to the inputs directly, instead of to the form. Sep 2, 2011 at 14:11
  • @mblase yep that's it. I had tried that but just figured out that I had a bug in the code where I was binding the inputs. I fixed the bug and now it works. Put an answer out there and I'll accept.
    – kasdega
    Sep 2, 2011 at 14:16
  • This is a side note, you have some redundant code. Remove evt.stopPropagation() and evt.preventDefault() as return false accomplishes both of these. Sep 2, 2011 at 14:18
  • @Interstellar - You went the wrong direction. He should do the stopPropgation and/or the preventDefault and NOT return false, not the other way around. fuelyourcoding.com/jquery-events-stop-misusing-return-false Sep 2, 2011 at 14:23

2 Answers 2

1

I would guess that the hotkey event is being captured by the input and then blocked. Try adding the event to the inputs directly, instead of to the form.

1
  • 1
    Adding it to the document is a short-cut, I think it would be better to bind it too all inputs as well. That way you don't override the whole documents shortcut keys unintended.
    – b01
    Sep 2, 2011 at 14:51
1

To disable not only control-s but others, I found this:

        function disableCtrlModifer(evt)
        {
            var disabled = {s:0};
            var ctrlMod = (window.event)? window.event.ctrlKey : evt.ctrlKey;
            var key = (window.event)? window.event.keyCode : evt.which;
            key = String.fromCharCode(key).toLowerCase();
            return (ctrlMod && (key in disabled))? false : true;
        }

Taken from here: http://www.arraystudio.com/as-workshop/disable-ctrl-n-and-other-ctrl-key-combinations-in-javascript.html

You can modify it to suit your needs. Although I don't know what "keyBinding" is, here's how I would plug it into your code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="Charts/js/jquery-1.6.2.js"></script>
        <script type="text/javascript">

            function disableCtrlModifer( evt )
            {
                var disabled = { s:0 }; // You can add more keys here :)
                var ctrlMod = ( window.event ) ? window.event.ctrlKey : evt.ctrlKey;
                var key = ( window.event ) ? window.event.keyCode : evt.which;
                key = String.fromCharCode( key ).toLowerCase();
                return ( ctrlMod && (key in disabled) ) ? false : true;
            }

            $( document ).ready(function()
            {
                $( "[id^='formCtrl']" ).each(function()
                {
                    var me = $( this );
                    var myId = me.attr( "id" );
                    var keyBinding = myId.replace("form", "").replace( /(.{4})/g,"$1+" );
                    //$(document).bind( "keydown keypress keyup", disableCtrlModifer );
                    me.find( "input" ).each( function()
                    {
                        $( this ).bind( "keydown keypress keyup", keyBinding, disableCtrlKeyCombination );
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="formCtrl-123" method="get">
            <input type="text" name="test1" value="" />
        </form>
    </body>
</html>
1
  • Works in IE9, Chrome, and Firefox :). You may need to add textarea and select to the me.find selector. Also, adding it to the keyup may be overkill.
    – b01
    Sep 2, 2011 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.