javascript - 用于处理 Tab 键按下的 JavaScript

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-value。有关更多信息，请参阅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);

这是工作示例。

Answer 3

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

Answer 4

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

Answer 5

在指定的容器或元素中使用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>

Answer 6

您应该可以使用 keydown 事件来做到这一点。具体来说， event.target 应该指向所选元素，而 event.target.href 将为您提供该元素的 href-value。有关更多信息，请参阅 mdn。

下面的代码是 jQuery，但除了样板代码之外，其余的在纯 javascript 中是相同的。这是一个绑定到每个链接标签的 keydown 处理程序。

$('a').on( 'keydown ', function( e ) {
if( e.which == 9 ) {
    console.log( e.target.href );
}});

Answer 7

尝试这个

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

您需要对网站 URL 使用正则表达式

var urlPattern = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&:/~+#-]* [\w@?^=%&/~+#-])?/

使用此表达式作为示例

var regex = new RegExp(urlPattern); var t = 'www.google.com';
var res = t.match(正则表达式 /g);

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