众所周知，当我们在键盘上点击 TAB 键时，它可以让我们浏览当前打开网页中所有活动的 href 链接。是否可以通过 JavaScript 读取这些链接地址？
示例：
function checkTabPress(key_val) {
if (event.keyCode == 9) {
// Here read the active selected link.
}
}
处理Tab键按下的JavaScript
33
- bharatesh
5
9个回答
19
你可以通过keyup事件实现此操作。具体来说，
以下代码是jQuery，但除了样板代码外，其余部分在纯javascript中相同。这是一个绑定到每个链接标记的
event.target应指向所选元素，event.target.href将为您提供该元素的href值。有关更多信息，请参见mdn。以下代码是jQuery，但除了样板代码外，其余部分在纯javascript中相同。这是一个绑定到每个链接标记的
keyup处理程序。$('a').on( 'keyup', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}
} );
jsFiddle: http://jsfiddle.net/4PqUF/
- Sumurai8
3
这将指向在按下Tab键时选择的元素，而不是已聚焦的新元素。 - zzzzBov
1据我所知（并且根据我在IE8中的测试），keydown将在按键执行任何操作之前被触发（您可以随时取消它执行的任何操作），而keyup将指向新元素，因为keyup是在按键执行完毕后触发的。 - Sumurai8
我不知道你可以绑定到
a元素，即使之前聚焦的元素不是a也能触发。尽管使用了jQuery，但还是给一个赞。 - rink.attendant.614
以下是要翻译的内容：
<!-- note that not all browsers focus on links when Tab is pressed -->
<a href="http://example.com">Link</a>
<input type="text" placeholder="Some input" />
<a href="http://example.com">Another Link</a>
<textarea>...</textarea>
您可以使用以下方法访问活动链接:
// event listener for keyup
function checkTabPress(e) {
"use strict";
// pick passed event or global event object if passed one is empty
e = e || event;
var activeElement;
if (e.keyCode == 9) {
// Here read the active selected link.
activeElement = document.activeElement;
// If HTML element is an anchor <a>
if (activeElement.tagName.toLowerCase() == 'a')
// get it's hyperlink
alert(activeElement.href);
}
}
var body = document.querySelector('body');
body.addEventListener('keyup', checkTabPress);
这里有一个工作的例子。
- uKolka
5
撤回我的话。它在不是每个浏览器中都有效。让我想出一个跨浏览器的代码。 - uKolka
无论在哪个浏览器中运行，该浏览器的JavaScript引擎都存在严重问题... - rink.attendant.6
我认为Chrome没有什么严重的问题 =) - uKolka
我猜你的代码可以在Chrome、Safari、IE 10兼容模式以及旧版本的IE中运行。 - rink.attendant.6
3
只有一个建议，可以使用KeyCodes代替9。使用TAB。
- Panky031
1
4或者
e.key === 'Tab' - jsruok1
尝试这个。
<body>
<div class="linkCollection">
<a tabindex=1 href="www.demo1.com">link</a>
<a tabindex=2 href="www.demo2.com">link</a>
<a tabindex=3 href="www.demo3.com">link</a>
<a tabindex=4 href="www.demo4.com">link</a>
<a tabindex=5 href="www.demo5.com">link</a>
<a tabindex=6 href="www.demo6.com">link</a>
<a tabindex=7 href="www.demo7.com">link</a>
<a tabindex=8 href="www.demo8.com">link</a>
<a tabindex=9 href="www.demo9.com">link</a>
<a tabindex=10 href="www.demo10.com">link</a>
</div>
</body>
<script>
$(document).ready(function(){
$(".linkCollection a").focus(function(){
var href=$(this).attr('href');
console.log(href);
// href variable holds the active selected link.
});
});
</script>
不要忘记添加jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
- Niravdas
3
使用大于0的tabindex会破坏Tab键顺序，不建议这样做。 - Ben S
问题，如果我有一个单独的JavaScript文件，我是在HTML中添加jQuery库还是在单独的JavaScript文件中添加？ - cakebot
可以使用单独的JavaScript文件，我们只需要jQuery库。 - Niravdas
1
给定这段HTML代码：
<a href='https://facebook.com/'>Facebook</a>
<a href='https://google.ca/'>Google</a>
<input type='text' placeholder='an input box'>
我们可以使用这个 JavaScript：
function checkTabPress(e) {
'use strict';
var ele = document.activeElement;
if (e.keyCode === 9 && ele.nodeName.toLowerCase() === 'a') {
console.log(ele.href);
}
}
document.addEventListener('keyup', function (e) {
checkTabPress(e);
}, false);
我已经将一个事件监听器绑定到
document元素上，用于keyUp事件，触发一个函数来检查是否按下（或技术上说是释放）了Tab键。
该函数检查当前聚焦的元素以及NodeName是否为a。如果是，则进入if块，在我的情况下，将href属性的值写入JavaScript控制台。
这是一个jsFiddle
- rink.attendant.6
7
1为什么要将回调函数包装成另一个无用的回调函数？ - uKolka
因为我正在传递一个参数。 - rink.attendant.6
1该参数是一个事件，它会被传递。 - uKolka
如果它没有被传递，很可能存在一个全局变量'event'，因此您可以在它们之间进行选择。 - uKolka
显示剩余2条评论
0
你应该能够使用 keydown 事件来实现此功能。具体而言，event.target 应该指向所选元素，event.target.href 将给出该元素的 href 值。有关更多信息，请参见 mdn。
以下代码是 jQuery，但除了样板代码之外，其余部分在纯 javascript 中相同。这是一个绑定到每个链接标记的 keydown 处理程序。
以下代码是 jQuery，但除了样板代码之外，其余部分在纯 javascript 中相同。这是一个绑定到每个链接标记的 keydown 处理程序。
$('a').on( 'keydown ', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}});
- Saif
0
在指定的容器或元素中使用TAB和TAB+SHIFT
我们将首先处理TAB和TAB+SHIFT键监听器
$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
if (e.keyCode == 9) {
if (e.shiftKey) {
//Focus previous input
if (thisTab == startIndex) {
$("." + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
return false;
}
} else {
if (thisTab == lastIndex) {
$("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
return false;
}
}
}
});
var setTabindexLimit = function(x, fancyID) {
console.log(x);
startIndex = 1;
lastIndex = x;
tabLimitInID = fancyID;
$("." + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
}
/*Taking last tabindex=10 */
setTabindexLimit(10, "limitTablJolly");
});
在 HTML 中定义 tabindex。
<div class="limitTablJolly">
<a tabindex=1>link</a>
<a tabindex=2>link</a>
<a tabindex=3>link</a>
<a tabindex=4>link</a>
<a tabindex=5>link</a>
<a tabindex=6>link</a>
<a tabindex=7>link</a>
<a tabindex=8>link</a>
<a tabindex=9>link</a>
<a tabindex=10>link</a>
</div>
- Code Spy
0
event.keyCode已经弃用。
请改用event.key。
以下是您可以用来断言event.key的值：
https://www.w3.org/TR/uievents-key/#named-key-attribute-values
请使用此JavaScript解决方案：
function keyPress(event) {
if (event.key === "Tab") {
// ...
}
}
- Robert Rendell
-10
你需要使用正则表达式
对于网站URL，它是：
var urlPattern = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/
将其作为示例使用
var regex = new RegExp(urlPattern ); var t = 'www.google.com';
var res = t.match(regex /g);
对于您必须将您的网页作为字符串传递给此JavaScript中的变量t并获得数组。
- Vishmay
1
这还不足以回答这个问题。 - juliocesar
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
document.activeElement以获取当前聚焦的元素（如果有的话，否则为body）。您可以检查.nodeName.toUpperCase() === "a"，然后读取其.href属性。 - Ian.toLowerCase()？ - rink.attendant.6