用於處理Tab鍵的JavaScript按

如我們所知，當我們點擊TAB鍵時，它允許我們瀏覽所有活動的href鏈接目前打開的網頁。是否有可能通過JavaScript閱讀這些URL？用於處理Tab鍵的JavaScript按

例如：

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

來源

2013-08-19 bharatesh

看看'document.activeElement'獲取當前焦點的元素（如果有的話，或者'body'）。你可以檢查'.nodeName.toUpperCase（）===「a」'，然後閱讀它的'.href'屬性 – Ian

看看這個問題（沒有測試它）。 http://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery –

@Ian你的意思是'.toLowerCase（）'？ –

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

來源

2013-08-19 14:46:40 uKolka

該示例不起作用... –

@ rink.attendant.6我很確定它確實如此。嘗試[全屏結果]（http://jsfiddle.net/kolkabes/esMQD/embedded/result/）並按幾次Tab鍵。 Shift-Tab也起作用。 – uKolka

回我的話。我沒有但沒有在每個瀏覽器中。讓我想出一個跨瀏覽器的代碼。 – uKolka

鑑於這段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到document元素爲keyUp事件，這將觸發功能檢查標籤鍵是否被按下（或技術上已釋放）。

該功能檢查currently focused element以及NodeName是否爲a。如果是這樣，它將輸入if塊，在我的情況下，將href屬性的值寫入JavaScript控制檯。

這裏有一個jsFiddle

來源

2013-08-19 14:50:19

IE 9，Firefox和Chrome都適用於我，我的所有變量都已定義。 –

爲什麼你將回調函數換成另一個無用的回調？ – uKolka

因爲我傳遞了一個參數。 –

你應該能夠與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/

來源

2013-08-19 14:51:52 Sumurai8

這將指向按Tab鍵時所選元素，而不是已聚焦的新元素。 – zzzzBov

keydown將會在任何鍵之前被觸發（並且您可以取消它所做的任何操作），據我所知（並且就我可以在IE8中測試而言），keyup將指向新元素，因爲keyup是在任何關鍵的事情之後開槍。 – Sumurai8

我完全誤讀爲keydown。好點子。 – zzzzBov

-6

你需要使用正則表達式對於網站網址是

VAR URLPATTERN = /（HTTP | FTP | HTTPS）：// [\ w - ] +（。[\ w - ] +）+（[\ w。，@？^ =％&：/〜+＃ - ] * [\ w @？^ =％& /〜+＃ - ]）？/

使用此表達式作爲示例

var regex = new RegExp（urlPattern）; var t ='www.google.com';
var res = t。匹配（正則表達式/ g）;

對於你要通過你的網頁的字符串該JavaScript中變量t，並得到陣列

來源

2014-07-12 05:38:57 Vishmay

這不足以回答這個問題。 – juliocesar

只有一個建議，而不是9，你可以使用KeyCodes.TAB。

來源

2017-10-12 08:16:44 Panky031

用於處理Tab鍵的JavaScript按

回答

相關問題