用于处理 Tab 键按下的 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18316395/
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
JavaScript for handling Tab Key press
提问by bharatesh
As we know, when we click on TABkey on keyboard, it allows us to navigate through all active href links present open webpage. Is it possible to read those urls by means of JavaScript?
众所周知，当我们单击TAB键盘上的键时，它允许我们浏览当前打开的网页上的所有活动 href 链接。是否可以通过 JavaScript 读取这些 url？
example:
例子：
function checkTabPress(key_val) {
if (event.keyCode == 9) {
// Here read the active selected link.
}
}
回答by Sumurai8
You should be able to do this with the keyup event. To be specific, event.targetshould point at the selected element and event.target.hrefwill give you the href-value of that element. See mdnfor more information.
您应该能够使用 keyup 事件来做到这一点。具体来说，event.target应该指向所选元素并event.target.href为您提供该元素的 href 值。有关更多信息，请参阅mdn。
The following code is jQuery, but apart from the boilerplate code, the rest is the same in pure javascript. This is a keyuphandler that is bound to every link tag.
下面的代码是jQuery，但是除了样板代码之外，其他都是纯javascript的。这是一个keyup绑定到每个链接标签的处理程序。
$('a').on( 'keyup', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}
} );
jsFiddle: http://jsfiddle.net/4PqUF/
jsFiddle：http: //jsfiddle.net/4PqUF/
回答by uKolka
Having following html:
具有以下html：
<!-- 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>
You can get to active link with:
您可以通过以下方式访问活动链接：
// 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);
Here is working example.
这是工作示例。
回答by rink.attendant.6
Given this piece of HTML code:
鉴于这段 HTML 代码：
<a href='https://facebook.com/'>Facebook</a>
<a href='https://google.ca/'>Google</a>
<input type='text' placeholder='an input box'>
We can use this JavaScript:
我们可以使用这个 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);
I have bound an event listenerto the documentelement for the keyUpevent, which triggers a function to check if the Tabkey was pressed (or technically, released).
我已将事件侦听器绑定到事件的document元素keyUp，这会触发一个函数来检查Tab键是否被按下（或从技术上讲，被释放）。
The function checks the currently focused elementand whether the NodeNameis a. If so, it enters the ifblock and, in my case, writes the value of the hrefproperty to the JavaScript console.
该函数检查当前聚焦的元素以及是否NodeName为a。如果是这样，它进入if块，在我的例子中，将href属性的值写入JavaScript 控制台。
Here's a jsFiddle
这是一个jsFiddle
回答by Panky031
Only one suggestion instead of 9you can use KeyCodes.TAB.
只有一个建议而不是9您可以使用KeyCodes. TAB.
回答by Code Spy
Use TAB & TAB+SHIFTin a Specified container or element
在指定的容器或元素中使用TAB & TAB+SHIFT
we will handle TAB & TAB+SHIFT key listenersfirst
我们将处理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");
});
In HTMLdefine tabindex
在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>
回答by Niravdas
try this
试试这个
<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>
don't forgot to add jQuery library
不要忘记添加jQuery库
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
回答by Vishmay
You need to use Regular Expression For Website URL it is
您需要对网站 URL 使用正则表达式，它是
var urlPattern = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/
var urlPattern = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&:/~+#-]* [\w@?^=%&/~+#-])?/
Use this Expression as in example
使用此表达式作为示例
var regex = new RegExp(urlPattern ); var t = 'www.google.com';
var res = t.match(regex /g);
var regex = new RegExp(urlPattern); var t = 'www.google.com';
var res = t.match(regex /g);
For You have to pass your web page as string to this javascript in variable t and get array
因为您必须将您的网页作为字符串传递给变量 t 中的此 javascript 并获取数组
