0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<h1>Click aqui y luego TAB para navegar</h1>
    <ul id="mb1" tabindex="-1">
        <li id="mb1_menu1" tabindex="1"> Font
            <ul id="fontMenu" title="Font" tabindex="-1">
                <li id="sans-serif" tabindex="1.2">Sans-serif</li>
                <li id="serif" tabindex="1.3">Serif</li>
                <li id="monospace" tabindex="-1">Monospace</li>
                <li id="fantasy" tabindex="-1">Fantasy</li>
            </ul>
        </li>
        <li id="mb1_menu2" tabindex="2"> Style
            <ul id="styleMenu" title="Style" tabindex="-1">
                <li id="italic" tabindex="2.2">Italics</li>
                <li id="bold" tabindex="2.3">Bold</li>
                <li id="underline" tabindex="2.4">Underlined</li>
            </ul>
        </li>
        <li id="mb1_menu3" tabindex="3"> Justification
            <ul id="justificationMenu" title="Justication" tabindex="-1">
                <li id="left" tabindex="3.2">Left</li>
                <li id="center" tabindex="3.3">Centered</li>
                <li id="right" tabindex="3.4">Right</li>
                <li id="justify" tabindex="3.5">Justify</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Espero me puedan ayudar. Quiero usar el tab index para navegar a través de una página web(viajar opción por opción). Quiero que imprima en consola el texto de la opción en la que se encuentre. Espero que me puedan entender y ayudar. Salidos.

2 respuestas 2

1

Este código en jquery podría servirte, se utiliza la función keyup:

$(window).keyup(function (e) {
  var $focused = $(':focus'); 
  // OTRAS OPCIONES PODRIAN SER:
  // $focused.attr('class')
  // $focused.attr('id')...
  console.log(", "+$focused.prop("tagName")+", "+$focused.text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<h1>Click aqui y luego TAB para navegar</h1>
    <ul id="mb1" tabindex="-1">
        <li id="mb1_menu1" tabindex="1"> Font
            <ul id="fontMenu" title="Font" tabindex="-1">
                <li id="sans-serif" tabindex="1.2">Sans-serif</li>
                <li id="serif" tabindex="1.3">Serif</li>
                <li id="monospace" tabindex="-1">Monospace</li>
                <li id="fantasy" tabindex="-1">Fantasy</li>
            </ul>
        </li>
        <li id="mb1_menu2" tabindex="2"> Style
            <ul id="styleMenu" title="Style" tabindex="-1">
                <li id="italic" tabindex="2.2">Italics</li>
                <li id="bold" tabindex="2.3">Bold</li>
                <li id="underline" tabindex="2.4">Underlined</li>
            </ul>
        </li>
        <li id="mb1_menu3" tabindex="3"> Justification
            <ul id="justificationMenu" title="Justication" tabindex="-1">
                <li id="left" tabindex="3.2">Left</li>
                <li id="center" tabindex="3.3">Centered</li>
                <li id="right" tabindex="3.4">Right</li>
                <li id="justify" tabindex="3.5">Justify</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Usando JS:

document.addEventListener('focus',function(e){
console.log("Elemento: "+document.activeElement.tagName
					+", "+document.activeElement.innerHTML);
}, true);
<h1>Click aqui y luego TAB para navegar</h1>
    <ul id="mb1" tabindex="-1">
        <li id="mb1_menu1" tabindex="1"> Font
            <ul id="fontMenu" title="Font" tabindex="-1">
                <li id="sans-serif" tabindex="1.2">Sans-serif</li>
                <li id="serif" tabindex="1.3">Serif</li>
                <li id="monospace" tabindex="-1">Monospace</li>
                <li id="fantasy" tabindex="-1">Fantasy</li>
            </ul>
        </li>
        <li id="mb1_menu2" tabindex="2"> Style
            <ul id="styleMenu" title="Style" tabindex="-1">
                <li id="italic" tabindex="2.2">Italics</li>
                <li id="bold" tabindex="2.3">Bold</li>
                <li id="underline" tabindex="2.4">Underlined</li>
            </ul>
        </li>
        <li id="mb1_menu3" tabindex="3"> Justification
            <ul id="justificationMenu" title="Justication" tabindex="-1">
                <li id="left" tabindex="3.2">Left</li>
                <li id="center" tabindex="3.3">Centered</li>
                <li id="right" tabindex="3.4">Right</li>
                <li id="justify" tabindex="3.5">Justify</li>
            </ul>
        </li>
    </ul>

3
  • Hola, muchas gracias por tu respuesta. Un favor, podrías ayudarme con lo mismo pero con javascript puro? Commented el 14 jun. 2017 a las 22:30
  • @josefranciscosotteccani actualicé mi respuesta.
    – Rene Limon
    Commented el 14 jun. 2017 a las 23:06
  • Bice one! En la nueva edición. También creo que es mejor así con el evento focus en vez de keyup como hice en mi respuesta! Porque el evento puede ocurrir en el ratón también. De todos modos +1 ! Es sólo una cuestión de principios, me entiendes?! ;)
    – Chun
    Commented el 15 jun. 2017 a las 19:27
0

Si el uso de jQuery es una opción, puede utilizar .focus() junto con .attr() como sigue abajo:

$('#mb1 *').focus(function() {
    console.log($(this).attr('tabindex'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<h1>Click aqui y luego TAB para navegar</h1>
    <ul id="mb1" tabindex="-1">
        <li id="mb1_menu1" tabindex="1"> Font
            <ul id="fontMenu" title="Font" tabindex="-1">
                <li id="sans-serif" tabindex="1.2">Sans-serif</li>
                <li id="serif" tabindex="1.3">Serif</li>
                <li id="monospace" tabindex="-1">Monospace</li>
                <li id="fantasy" tabindex="-1">Fantasy</li>
            </ul>
        </li>
        <li id="mb1_menu2" tabindex="2"> Style
            <ul id="styleMenu" title="Style" tabindex="-1">
                <li id="italic" tabindex="2.2">Italics</li>
                <li id="bold" tabindex="2.3">Bold</li>
                <li id="underline" tabindex="2.4">Underlined</li>
            </ul>
        </li>
        <li id="mb1_menu3" tabindex="3"> Justification
            <ul id="justificationMenu" title="Justication" tabindex="-1">
                <li id="left" tabindex="3.2">Left</li>
                <li id="center" tabindex="3.3">Centered</li>
                <li id="right" tabindex="3.4">Right</li>
                <li id="justify" tabindex="3.5">Justify</li>
            </ul>
        </li>
    </ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.