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? el 14 jun. 2017 a las 22:30
  • @josefranciscosotteccani actualicé mi respuesta.
    – Rene Limon
    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
    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 that you have read and understand our privacy policy and code of conduct.

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