jQuery 热键插件提交表单在输入时不起作用

发布于 12-03 02:06 字数 921 浏览 6 评论 0原文

我有一个包含一堆小表格的页面。我想动态分配一个热键来提交每个表单。代码如下所示:

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>

...很多其他类似的小表单,每个表单都有一个与热键相关的唯一 id...

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;
    });
});

简单吧?但是页面上还有多个文本输入,如果用户在其中一个字段中键入并按下其中一个热键,则不会提交相应的表单,事实上,如果热键与浏览器的某些内容匹配,例如 Ctrl-s显示保存对话框。知道如何阻止这种情况发生吗?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

妥活2024-12-10 02:06:38

我猜测热键事件被输入捕获然后被阻止。尝试将事件直接添加到输入,而不是添加到表单。

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.

爺獨霸怡葒院2024-12-10 02:06:38

为了不仅禁用 control-s 而且禁用其他控件,我发现了这个:

        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;
        }

取自这里:
http:// /www.arraystudio.com/as-workshop/disable-ctrl-n-and-other-ctrl-key-combinations-in-javascript.html

您可以修改它以满足您的需要。虽然我不知道“keyBinding”是什么,但我将如何将其插入您的代码中:

<!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>

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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文