如果焦点在其他元素上，则 keydown 事件不起作用

Question

我有一个表单，其中分别有多个文本框、下拉菜单和一个复选框。我想提交此表单如果我在键盘上输入 S 按钮。复选框不是必填字段，下拉后下一个焦点转到复选框，如果我输入 S，则按键处理程序不起作用。

以下是我的按键处理程序代码，我保存在 document.ready() 方法中：

$('#submitBtn').bind('keydown', 's', function() {
    alert("S pressed");
    $('#myForm').submit();
});

当焦点在提交按钮上时，只有它起作用，如果我将焦点移到其他元素上，它就不会起作用。我是 JQuery/Javascript 的新手，所以不知道为什么它不起作用。

我无法提供完整的 HTML，以下标记非常相似：

<html>
    <body>
        <script src="C:/Desktop/test/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#saveBtn').bind('keydown', 's', function() {
                    alert("S pressed :: SaveInfo() function call");
                    //SaveInfo() function call
                });
            });
        </script>
        <div id="saveInfo">
            <ul >
                <li>
                    <div>
                        <input type="text" maxlength="30" tabindex = "1" />
                        <br>
                        <input type="text" maxlength="30" tabindex = "2" />
                        <br>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div>
                        <input type="checkbox" id="checkBox1" value="false" tabindex ="3"/>
                    </div>
                </li>
                <li>
                    <div>
                        <input type="button" name="saveBtn" id="saveBtn" value="Save" tabindex ="4"/>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>

Answer 1

试试这个

$(document.body).bind('keydown', 's', function() {
    alert("S pressed");
    $('#myForm').submit();
});

Answer 2

我觉得很正常。您将 keyDown 事件放在您的按钮上，这就是 keDown 事件仅在您的按钮上的原因。尝试替换

$('#submitBtn').bind('keydown', 's', function() {
   alert("S pressed");
   $('#myForm').submit();
});

来自

$(document).bind('keydown', 's', function() {
   alert("S pressed");
   $('#myForm').submit();
});

在这种情况下，keyDown 事件在您的所有页面上，而不仅仅是在按钮中。

Answer 3

参考一下jquery bind()方法，可以发现第二个参数是"An object containing data that will be passed to the event handler"。因此，您可以在该参数中传递任何可用于触发每个 keydown 事件的任何内容。

试试这个代码

$(document).bind('keydown', '', function(e) {
    if (e.keyCode == 83) {
        $('#myForm').submit();
    }
});

或者你也可以使用.on来绑定事件，

$(document).on('keydown', '', function(e) {
    if (e.keyCode == 83) {
        $('#myForm').submit();
    }
});

我已指定 83 即 letter 'S'

的关键 ascii 代码

Answer 4

$("body").keydown(function(e) {

 
   
      $('#submitBtn').text("Pressed!");
 if(e.keyCode == 83) {
     $('#submitBtn').text("S Pressed!");
   }
    


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submitBtn" type="button">press here</button>

Answer 5

根据您更新的问题：

您想在键盘按下 's' 时触发 form.submit() 事件

试试 FIDDLE,

它解决了这个问题，您实际上是将按键事件绑定到 #submitBtn 但要定位完整的表单，您必须定位表单上的所有 DOM 元素。

您可以通过 select document 作为 select 或关注

来实现这一点

$(document).ready(function() {
                $(document).bind('keydown', 's', function() {
                    alert("S pressed :: SaveInfo() function call");
                    //SaveInfo() function call
                });
});

希望它能解决您的问题。

谢谢

如果焦点在其他元素上，则 keydown 事件不起作用

keydown event not working if focus is on other element

javascript

jquery

bind

keydown

jquery-events