Question

众所周知，当我们点击键盘上的 TAB 键时，它允许我们浏览当前打开网页的所有活动href链接。是否可以通过JavaScript阅读这些网址？

示例：

function checkTabPress(key_val) {
    if (event.keyCode == 9) {
        // Here read the active selected link.
    }
}

Answer 1

您应该可以使用keyup事件执行此操作。具体而言，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/

Answer 2

有以下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>

您可以通过以下方式进入活动链接：

// 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);

这是working example。

Answer 3

鉴于这段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);

我已将event listener绑定到keyUp事件的document元素，该事件会触发一个函数来检查是否按下了 Tab 键（或技术上，已发布）。

该函数检查currently focused element以及NodeName是否为a。如果是，则进入if块，在我的情况下，将href属性的值写入JavaScript控制台。

这是jsFiddle

Answer 4

只有一个建议而不是implicitly，您可以使用9。KeyCodes。

Answer 5

在指定的容器或元素

中使用 TAB和TAB + SHIFT

Source

我们将首先处理 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>

Answer 6

尝试

 <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>

Answer 7

您需要使用正则表达式对于网站网址，它是

var urlPattern = /（HTTP | FTP | HTTPS）：// [\ W-] + +（[\ W，@ ^ =％安培。？;：/〜+＃ - ]（[\ W-] +。）* [\瓦特@ ^ =％安培;？/〜+＃ - ]）/

使用此表达式作为示例

var regex = new RegExp（urlPattern）; var t =＆＃39; www.google.com＆＃39;;
var res = t.match（regex / g）;

因为您必须将您的网页作为字符串传递给变量t中的此javascript并获取数组

用于处理Tab键按下的JavaScript

7 个答案: