jQuery 检测由tab键启动的焦点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16144611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect focus initiated by tab key?
提问by HellaMad
I want to detect the focus event of an element, but only if it was initiated by the user pressing the tab key. For example:
我想检测一个元素的焦点事件，但前提是它是由用户按下 Tab 键启动的。例如：
<input type="text" id="foo" />
<input type="text" id="detect" />
If the user is focused on #fooand presses Tab, I want the event to fire once #detectbecomes focused (or a conditional inside the focus event to be true). Conversely, if the user simply clicks on the #detectfield to focus it, I do not want the event to fire (or I want the conditional inside the focus event call to be false).
如果用户专注于#foo并按下Tab，我希望事件在#detect聚焦后触发（或焦点事件内的条件为真）。相反，如果用户只是单击该#detect字段以将其聚焦，我不希望触发该事件（或者我希望 focus 事件调用中的条件为 false）。
I don't want to use the keydown event of #fooand check if the tab key was pressed, as I want the approach to be independent of any other element.
我不想使用 keydown 事件#foo并检查是否按下了 Tab 键，因为我希望该方法独立于任何其他元素。
I looked through the console output of the following code, but couldn't notice any real differences between the two methods of focusing:
我查看了以下代码的控制台输出，但没有注意到两种聚焦方法之间的任何真正区别：
$('#detect').on('focus', function(e){
console.log(e);
});
(fiddle)
（小提琴）
Is this possible to accomplish in a relatively simple way?
这有可能以相对简单的方式完成吗？
回答by Pete
I know you have accepted an answer but you could test the button pressed using the following:
我知道您已接受答案，但您可以使用以下方法测试按下的按钮：
$('#detect').on('focus', function(e){
$(window).keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
}
});
});
Edit:change the listener around:
编辑：更改侦听器：
$(window).keyup(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9 && $('#detect:focus').length) {
alert('I was tabbed!');
}
});
回答by Gary
A more responsive solution would be to use two listeners:
响应更快的解决方案是使用两个侦听器：
var mousedown = false;
$('#detect').on('mousedown', function () {
mousedown = true;
});
$('#detect').on('focusin', function () {
if(!mousedown) {
// logic
}
mousedown = false;
});
Fiddle showing the difference in speed:
小提琴显示速度差异：
回答by dxh
As you've noticed, the event object itself does not distinguish the means of access. What you cando is to bind a mousedownlistener, which will fire before focus, and set some timestamp flag that you compare to some threshold value in your focushandler.
正如您所注意到的，事件对象本身并不区分访问方式。您可以做的是绑定一个mousedown侦听器，它将在 之前触发focus，并设置一些时间戳标志，您将其与focus处理程序中的某个阈值进行比较。
回答by user617263
You can check focus event on specific input by this code
您可以通过此代码检查特定输入的焦点事件
$(window).on('keyup', function(event){
if(event.keyCode == '9'){
getFocused(event);
}
})
var focused = 0;
function getFocused(e){
var ida = $(':focus').eq(0).prop('id');
if(ida=='detect' && focused==0){
focused = 1;
console.log(e);
}
}
回答by Esteban Borai
I use the following:
我使用以下内容：
(function() {
const tabHistory = [];
window.addEventListener('keyup', function (e) {
const code = e.keyCode || e.which;
const index = tabHistory.length === 0 ? 1 : tabHistory.length + 1;
if (code == 9) {
tabHistory.push({
element: e.target,
index
});
console.log(index, e.target, tabHistory);
}
});
})();
I recommend keeping a track of the focused elements, this way you make sure the user will be able to tab as you expected.
我建议跟踪重点元素，这样您就可以确保用户能够按预期进行选项卡。
Hope it helps!
希望能帮助到你！
回答by Purvesh Tejani
<input type="text" id="foo" />
<input type="text" id="detect" />
<script>
$("#foo").on('keyup', function(){
document.getElementById("detect").value = "007";
alert("your tab active successfully");
});
</script>
