如果焦点在其他元素上，则 keydown 事件不起作用
[英]keydown event not working if focus is on other element
问题描述
I have a form which has multiple textboxes, dropdowns and one checkbox respectively.
我有一个表单，其中分别有多个文本框、下拉列表和一个复选框。 I want to submit this form If I enter S button on keyboard.如果我在键盘上输入S按钮，我想提交此表格。 Checkbox is not a mandatory field, after dropdown next focus goes to checkbox and If I enter S then the keydown handler is not working.复选框不是必填字段，下拉后下一个焦点转到复选框，如果我输入S则 keydown 处理程序不起作用。
Following is my code for keydown handler, which I kept in document.ready() method:以下是我保存在document.ready()方法中的 keydown 处理程序的代码：
$('#submitBtn').bind('keydown', 's', function() {
alert("S pressed");
$('#myForm').submit();
});
When the focus is on submit button then only it work, if I moved focus to other element then it wont.当焦点在提交按钮上时，只有它起作用，如果我将焦点移到其他元素，则它不会。 I am new to JQuery/Javascript so do not have idea why it is not working.我是 JQuery/Javascript 的新手，所以不知道为什么它不起作用。
I can not provide the complete HTML, following markup is pretty much similar:我无法提供完整的 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>
5 个解决方案
解决方案1
1 2015-11-26 11:28:55
As per your updated question:根据您更新的问题：
You want to trigger the the form.submit() event when ever there is 's' pressed from the keyboard您想在键盘按下“s”时触发form.submit()事件
It server the issue, you are actually binding the keypress event to #submitBtn but for targeting complete form you have to target All the DOM elements on the forms.它解决了这个问题，您实际上是将#submitBtn事件绑定到#submitBtn但是为了定位完整的表单，您必须定位表单上的所有 DOM 元素。
Simply you can achieve this from select document as a selector like following只需将选择document作为选择器即可实现此目的，如下所示
$(document).ready(function() {
$(document).bind('keydown', 's', function() {
alert("S pressed :: SaveInfo() function call");
//SaveInfo() function call
});
});
Hope it serves your issue.希望它可以解决您的问题。
Thanks谢谢
解决方案2
0 2015-11-25 11:00:24
Try this尝试这个
$(document.body).bind('keydown', 's', function() {
alert("S pressed");
$('#myForm').submit();
});
解决方案3
0 2015-11-25 11:05:31
I thin k it is normal.我认为这是正常的。 You put the keyDown event on your button this is the reason why the keDown event is only on your button.您将 keyDown 事件放在按钮上，这就是 keDown 事件仅在您的按钮上的原因。 Try to replace尝试更换
$('#submitBtn').bind('keydown', 's', function() {
alert("S pressed");
$('#myForm').submit();
});
by经过
$(document).bind('keydown', 's', function() {
alert("S pressed");
$('#myForm').submit();
});
In this case the keyDown event is on all your page and not only in the button.在这种情况下，keyDown 事件在您的所有页面上，而不仅仅是在按钮中。
解决方案4
0 2015-11-25 11:25:52
Refer this once for the jquery bind() method, you can find that the 2nd paramter is for "An object containing data that will be passed to the event handler".参考一次 jquery bind()方法，你会发现第二个参数是“一个包含将传递给事件处理程序的数据的对象”。 So, you can pass anything in that parameter which will be available for every keydown event triggered.因此，您可以传递该参数中的任何内容，这些内容可用于触发的每个keydown事件。
Try this code试试这个代码
$(document).bind('keydown', '', function(e) {
if (e.keyCode == 83) {
$('#myForm').submit();
}
});
Or you can use .on also to bind events,或者你也可以使用.on来绑定事件，
$(document).on('keydown', '', function(e) {
if (e.keyCode == 83) {
$('#myForm').submit();
}
});
I have specified 83 ie key ascii code for the letter 'S'我已经为letter 'S'指定了83 ie key ascii 代码
解决方案5
0 已采纳 2015-11-25 11:28:48
$("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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.