JavaScript per la gestione della scheda Tasto stampa

Question

Come sappiamo, quando si fa clic sul tasto TAB sulla tastiera, ci consente di navigare attraverso tutti i link href attivi presenti nella pagina web aperta. È possibile leggere questi URL tramite JavaScript?

esempio:

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

Answer 1

Avere seguente codice 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> 

si può arrivare a collegamento attivo con:

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

Ecco working example.

Answer 2

Dato questo pezzo di codice HTML:

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

possiamo usare questa 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); 

Ho legato un event listener all'elemento document per l'evento keyUp, che innesca una funzione di controllare se è stato premuto il tasto Tab (o tecnicamente, rilasciato).

La funzione controlla lo currently focused element e se lo NodeName è a. In tal caso, inserisce il blocco if e, nel mio caso, scrive il valore della proprietà href nella console JavaScript.

Ecco un jsFiddle

Answer 3

Si dovrebbe essere in grado di fare questo con l'evento keyup. Per essere precisi, event.target dovrebbe puntare all'elemento selezionato e event.target.href ti darà il valore href di quell'elemento. Vedere mdn per ulteriori informazioni.

Il seguente codice è jQuery, ma a parte il codice boilerplate, il resto è lo stesso in puro javascript. Questo è un gestore keyup associato a ogni tag di collegamento.

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

jsFiddle: http://jsfiddle.net/4PqUF/

Answer 4

devi usare espressioni regolari Per URL del sito web è

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

Utilizzare questa espressione come nell'esempio

var regex = new RegExp (urlPattern); var t = 'www.google.com';
var res = t.match (regex/g);

Per Devi passare la vostra pagina web come stringa da questo javascript in variabile t e ottenere gamma

Answer 5

Solo un suggerimento invece di 9 è possibile utilizzare KeyCodes.TAB.