英文:
How to do something when entering a div using the keyboard tab key
问题
当使用键盘Tab键进入一个div时，如何使用jQuery执行某项操作？例如，在下面的示例中，当用户使用键盘Tab按钮导航并进入"Inside" div 时，控制台日志直到再次按下Tab按钮才触发：
$('.inside').on('keydown', function(e) {
if (e.keyCode === 9) {
console.log('Inside');
}
});
请注意，这段代码会检测键盘事件，如果按下的键是Tab键（键码为9），则会在控制台中输出'Inside'。
英文:
How can I 'do something' with jQuery when entering a div using the keyboard tab key? For example, when a user navigates using the keyboard tab button, and they enter the 'Inside' div in the example below, the console log doesn't fire until the tab button is pressed a second time:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.inside').on('keydown', function(e) {
if (e.keyCode === 9) {
console.log('Inside');
}
});
<!-- language: lang-css -->
.inside {
border: 1px solid black;
margin: 10px;
min-height: 300px;
padding: 20px;
}
.outside {
padding: 20px;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
<a href="">Outside Link 1</a>
<a href="">Outside Link 2</a>
<a href="">Outside Link 3</a>
<a href="">Outside Link 4</a>
</div>
<div class="inside text-center">
<a href="">Inside Link 1</a>
<a href="">Inside Link 2</a>
<a href="">Inside Link 3</a>
<a href="">Inside Link 4</a>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
尝试使用：
$('.inside').on('keyup', function(e) {
if (e.keyCode === 9) {
console.log('Inside');
}
});
基本上，当使用 'keydown' 时，触发函数的监听器会等待焦点进入 .inside div 后按下制表键。因此，如果您需要在焦点移动到 .inside div 时立即触发函数，那么您可以只需检查制表键是否在 .inside div 内“抬起”。
更新：如果您只需要为第一个链接触发它，那么类似这样的代码应该有效（代码有点混乱，但它可以满足您的需求）：
$('.inside').on('keyup', function(e) {
const el = document.querySelector('.inside>:first-child');
if (e.keyCode === 9) {
if (el === document.activeElement) {
console.log('Inside');
}
}
});
英文:
Try using:
$('.inside').on('keyup', function(e) {
if (e.keyCode === 9) {
console.log('Inside');
}
});
Basically, when using 'keydown', the listener that triggers your function waits for the tab button to be pressed after the focus entered the .inside div. So, if you need the function to be triggered as soon as the focus moves to .inside div, then you can just check if tab button goes 'up' inside the .inside div
UPD: if you need it to be triggered only for the first link, then something like this should work (the code a bit messy but it does what you need)
$('.inside').on('keyup', function(e) {
const el = document.querySelector('.inside>:first-child');
if (e.keyCode === 9) {
if (el === document.activeElement) {
console.log('Inside');
}
}
});
答案2
得分: 1
监听DIV的链接上的“focus”事件，如果之前聚焦的元素在DIV之外，则对该事件做出反应。适用于任何TAB导航方向和鼠标操作。
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言: lang-js -->
$('.inside a').on('focus', function(e) {
if($(e.originalEvent.relatedTarget).parents('.inside').length){
// 聚焦移动到div内部，所以忽略
return;
}
console.log('Inside');
});
<!-- 语言: lang-css -->
:focus{
background:lightblue;
}
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
<a href="#">Outside Link 1</a>
<a href="#">Outside Link 2</a>
<a href="#">Outside Link 3</a>
<a href="#">Outside Link 4</a>
</div>
<div class="inside text-center">
<a href="#">Inside Link 1</a>
<a href="#">Inside Link 2</a>
<a href="#">Inside Link 3</a>
<a href="#">Inside Link 4</a>
</div>
</div>
<!-- 结束代码段 -->
英文:
Listen for the focus event on the DIV's links and if the previous focused element is outside of the DIV, react to the event. Works with any TAB navigation direction and the mouse also.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.inside a').on('focus', function(e) {
if($(e.originalEvent.relatedTarget).parents('.inside').length){
// focus is moved inside the div, so ignore
return;
}
console.log('Inside');
});
<!-- language: lang-css -->
:focus{
background:lightblue;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
<a href="#">Outside Link 1</a>
<a href="#">Outside Link 2</a>
<a href="#">Outside Link 3</a>
<a href="#">Outside Link 4</a>
</div>
<div class="inside text-center">
<a href="#">Inside Link 1</a>
<a href="#">Inside Link 2</a>
<a href="#">Inside Link 3</a>
<a href="#">Inside Link 4</a>
</div>
</div>
<!-- end snippet -->
答案3
得分: 1
你应该使用 keyup 事件。
在下面的示例中，event.currentTarget 总是指 div.inside 元素。因此，我们可以始终查询到 :first-child 并将其与 event.target 进行比较。
$('.inside').on('keyup', function({ currentTarget, key, target }) {
if (
key === 'Tab' &&
$(target).get(0) === $(currentTarget).find('a:first-child').get(0)
) {
console.log('Inside');
}
});
.inside {
border: 1px solid black;
margin: 10px;
min-height: 300px;
padding: 20px;
}
.outside {
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
<a href="">Outside Link 1</a>
<a href="">Outside Link 2</a>
<a href="">Outside Link 3</a>
<a href="">Outside Link 4</a>
</div>
<div class="inside text-center">
<a href="">Inside Link 1</a>
<a href="">Inside Link 2</a>
<a href="">Inside Link 3</a>
<a href="">Inside Link 4</a>
</div>
</div>
英文:
You should use the keyup event instead.
Be aware that keyCode is deprecated. It is better to use key instead.
In the example below, event.currentTarget is always the div.inside element. So we can always query down to the :first-child and compare it to the event.target.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.inside').on('keyup', function({ currentTarget, key, target }) {
if (
key === 'Tab' &&
$(target).get(0) === $(currentTarget).find('a:first-child').get(0)
) {
console.log('Inside');
}
});
<!-- language: lang-css -->
.inside {
border: 1px solid black;
margin: 10px;
min-height: 300px;
padding: 20px;
}
.outside {
padding: 20px;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="outside text-center">
<a href="">Outside Link 1</a>
<a href="">Outside Link 2</a>
<a href="">Outside Link 3</a>
<a href="">Outside Link 4</a>
</div>
<div class="inside text-center">
<a href="">Inside Link 1</a>
<a href="">Inside Link 2</a>
<a href="">Inside Link 3</a>
<a href="">Inside Link 4</a>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论