如何解决按下某个键时触发两个链接之一
我想使用 E 键触发第一个链接,或者使用 R 键触发第二个链接。我想避免必须按 Enter 来触发导航。
这是我尝试过的:
$(document).ready(function() {
$(document).bind("keydown",function(e) {
console.log(e.keyCode);
if (e.keyCode == 76) {
$("div:first-of-type a").focus();
$("div:nth-of-type(2n) a").focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="http://google.com">Google (E)</a>
<a href="http://youtube.com">YouTube (R)</a>
</div>
解决方法
使用以下简单脚本:
$(document).on("keydown",function (e) {
if (e.which == 69) { // e
$("#yourLink1").click();
}
});
$(document).on("keydown",function (e) {
if (e.which == 82) { // r
$("#yourLink2").click();
}
});
您可以在此处找到更多的键控代码:https://keycode.info/
我还建议您提供链接IDs:
<div class="test">
<a id="yourLink1" href="http://google.com"></a>
<a id="yourLink2" href="http://youtube.com"></a>
<img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
</div>
更新:
由于实际上已弃用了.which
和.keyCode
方法,因此我建议使用.code
:
document.addEventListener("keydown",function(e) {
if (e.code == "KeyE") { // e
$("#yourLink1").click();
}
if (e.code == "KeyR") { // r
$("#yourLink2").click();
}
});
(感谢Danziger提出的建议)
,您不需要给任何锚定焦点并尝试以编程方式单击它,只需直接导航到所需链接的href
。
此外,您在class="test
之后缺少右引号。
“ e”和“ r”分别是69和82,而不是76。
$(document).ready(function() {
$(document).on("keydown",function(e) {
if (e.keyCode == 69) {
location.href = "https://youtube.com";
alert("Going to YouTube"); // Just for testing
} else if(e.keyCode == 82) {
location.href = "https://example.com";
alert("Going to Example"); // Just for testing
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="https://youtube.com">
<img src="https://www.hugochaume.com/wp-content/uploads/2015/08/logo-codepen.png">
</a>
</div>
,
一种选择是将.input-select{
position: relative;
height: 100%;
}
.input-select:hover{
content: '';
position: absolute;
display: inline-block;
height: 50px;
width: 50px;
background-color: red;
z-index: 100;
}
添加到两个链接中,以便您可以从JS中获取它们,然后用id
的值更新window.location
:
href
$(document).ready(function() {
$(document).bind('keydown',(e) => {
const link = document.getElementById(`link${ e.key.toUpperCase() }`);
if (link) {
console.log(`Should redirect to ${ link.href }...`);
location.href = link.href;
} else {
console.log(`No link for key = ${ e.key }.`);
}
});
});
body {
font-family: monospace;
}
a {
display: block;
padding: 8px;
text-decoration: none;
}
kbd {
border: 1px solid #CCC;
background: #EEE;
border-radius: 2px;
padding: 0 4px;
}
.as-console-wrapper {
max-height: 66px !important;
}
或者,如果您不想添加<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<a href="http://google.com" id="linkE">Google <kbd>E</kbd></a>
<a href="http://youtube.com" id="linkR">YouTube <kbd>R</kbd></a>
</div>
,则可以使用jQuery的.children()
和.eq()
来根据其位置获取正确的链接:
id
$test = $('.test');
$(document).ready(function() {
$(document).bind('keydown',(e) => {
const key = e.key.toUpperCase();
if (key !== 'E' && key !== 'R') {
console.log(`No link for key = ${ e.key }.`,e.code);
return;
}
const link = $test.children().eq(key === 'E' ? 0 : 1);
if (link) {
console.log(`Should redirect to ${ link.attr('href') }...`);
// location.href = link.href;
}
});
});
body {
font-family: monospace;
}
a {
display: block;
padding: 8px;
text-decoration: none;
}
kbd {
border: 1px solid #CCC;
background: #EEE;
border-radius: 2px;
padding: 0 4px;
}
.as-console-wrapper {
max-height: 66px !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。