タブキーを操作するJavaScript

Question

キーボードのTABキーをクリックすると、開いているすべてのアクティブなhrefリンクをナビゲートできます。それらのURLをJavaScriptで読むことは可能ですか？

例：あなたがして、アクティブリンクに得ることができます

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

：：次のHTMLを持っ

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

Answer 1

// 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です。私はkeyUpイベントのためdocument要素にevent listenerを結合した

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

に機能をトリガ：

は

<a href='https://facebook.com/'>Facebook</a> 
<a href='https://google.ca/'>Google</a> 
<input type='text' placeholder='an input box'> 

私たちは、このJavaScriptを使用することができます：HTMLコードのこの部分を考えると

Answer 2

Tabキーが押された（または技術的にリリースされた）かどうかを確認します。

この関数は、currently focused elementをチェックし、NodeNameがaであるかどうかをチェックします。そうであれば、ifブロックに入り、私の場合はhrefプロパティの値をJavaScriptコンソールに書き込みます。

は、ここでは、keyUpイベントでこれを行うことができるはずjsFiddle

Answer 3

です。具体的には、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 4

あなたがウェブサイトのURLの正規表現 を使用する必要があることがある

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

この式を例のように使用します。

var regex = new RegExp（urlPattern）; var t = 'www.google.com';
var res = t。マッチ（正規表現/ g）;あなたのため

変数tで、このJavaScriptに文字列としてウェブページを渡すと、配列

Answer 5

一つだけの提案の代わりに、9あなたがKeyCodes.TABを使用することができますを取得する必要があります。