none
Foco sobre el navegador RRS feed

  • Pregunta

  • Hola que tal.. tengo una duda que realmente me interesaria saber..

    Cuando uno esta navegando en una web y empieza a moverse con el tab sobre los controles en un determinado momento se empieza a posicionar sobre las pestañas, barra de direcciones y otros del navegador.

    Por ejemplo mi caso.. tengo 5 textbox donde por jquery hago que el foco se mueva por los controles al apretar el tab, pero por ejemplo si clickea en otra parte de la web y apretamos el tab el foco se va hacia el navegador..

    Existe alguna forma de bloquear que el foco se vaya sobre el navegador por javascript o jquery y se quede en los controles que tenemos en la web??

    Muchas graciass..

    viernes, 15 de febrero de 2013 18:13

Respuestas

  • Hola go...

    te dejo una demo simple, tendrías que pulir bastantes cosas pero puede que te sirviera, lo que he intentado es capturar el keydown de teclado, en la demo se captura a nivel del document pero puedes acotarlo... y groso modo pregunto si estoy en el ultimo elemento de los que quiero controlar.. con el activeElement sabré quien tenía el foco y basta saber si es el ultimo para forzar a que tome el foco el primero.

    Espero que sirva... igual en tu contexto no sea 100% lo que buscas pero dale unas vueltas a los selectores de Jquery que te va ayudar mucho.

    <!DOCTYPE html>
    <html>
    <head>
    
        <title>Demo</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
        <script>
    
            $(document).ready(function () {
    
                /// Capturamos keydown de teclado en el documento
                $(document)[0].onkeydown = function (e) {
                    /// es Tab???
                    if (e.keyCode == 9) /// key = Tab ...
                    {
                        alert("he pulsado tabulador");
                        /// Antes de enviar el foco al siguiente vemos quien era el elemento activo en el documento y lo guardamos..
                        var quieneselindecentequetieneelfoco = $(document.activeElement); ///:-)
                        alert("El foco lo tenía :" + quieneselindecentequetieneelfoco[0].id + ", pasamos al siguiente elemento...");
    
                        //// mmm.. es el ultimo elemento input??? 
                        if (quieneselindecentequetieneelfoco[0].id == $("#ElementosInput input:last-of-type")[0].id)
                        {
                            alert("Oooh hemos llegado al ultimo elemento... forzamos el foco al primero antes que se vaya de fiesta...: " + $("input:first-of-type")[0].id);
                            $("#ElementosInput input:first-of-type")[0].focus();
                            $("#ElementosInput input:first-of-type")[0].innerText = "volví..";
                            
                        }
                    }
    
    
                }
            });
    
    
    
        </script>
    </head>
    <body> 
        <form>
            
        <div id="ElementosInput">
            <label>Estos son mis elementos input...</label>
        <input id="TextA" type="text"/>
        <input id="TextB" type="text"/>
        <input id="TextC" type="text"/>
       </div>
            </form>   
    </body>
    </html>
    

    Saludos.


    Danicuco - 2012

    • Marcado como respuesta go1987 lunes, 18 de febrero de 2013 18:59
    viernes, 15 de febrero de 2013 20:36

Todas las respuestas

  • Hola go...

    te dejo una demo simple, tendrías que pulir bastantes cosas pero puede que te sirviera, lo que he intentado es capturar el keydown de teclado, en la demo se captura a nivel del document pero puedes acotarlo... y groso modo pregunto si estoy en el ultimo elemento de los que quiero controlar.. con el activeElement sabré quien tenía el foco y basta saber si es el ultimo para forzar a que tome el foco el primero.

    Espero que sirva... igual en tu contexto no sea 100% lo que buscas pero dale unas vueltas a los selectores de Jquery que te va ayudar mucho.

    <!DOCTYPE html>
    <html>
    <head>
    
        <title>Demo</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
        <script>
    
            $(document).ready(function () {
    
                /// Capturamos keydown de teclado en el documento
                $(document)[0].onkeydown = function (e) {
                    /// es Tab???
                    if (e.keyCode == 9) /// key = Tab ...
                    {
                        alert("he pulsado tabulador");
                        /// Antes de enviar el foco al siguiente vemos quien era el elemento activo en el documento y lo guardamos..
                        var quieneselindecentequetieneelfoco = $(document.activeElement); ///:-)
                        alert("El foco lo tenía :" + quieneselindecentequetieneelfoco[0].id + ", pasamos al siguiente elemento...");
    
                        //// mmm.. es el ultimo elemento input??? 
                        if (quieneselindecentequetieneelfoco[0].id == $("#ElementosInput input:last-of-type")[0].id)
                        {
                            alert("Oooh hemos llegado al ultimo elemento... forzamos el foco al primero antes que se vaya de fiesta...: " + $("input:first-of-type")[0].id);
                            $("#ElementosInput input:first-of-type")[0].focus();
                            $("#ElementosInput input:first-of-type")[0].innerText = "volví..";
                            
                        }
                    }
    
    
                }
            });
    
    
    
        </script>
    </head>
    <body> 
        <form>
            
        <div id="ElementosInput">
            <label>Estos son mis elementos input...</label>
        <input id="TextA" type="text"/>
        <input id="TextB" type="text"/>
        <input id="TextC" type="text"/>
       </div>
            </form>   
    </body>
    </html>
    

    Saludos.


    Danicuco - 2012

    • Marcado como respuesta go1987 lunes, 18 de febrero de 2013 18:59
    viernes, 15 de febrero de 2013 20:36
  • Muchas gracias dani.. viento tu codigo lo he podido resolver.. me sirvio mucho el activeElement.. gracias.. saludos!!!
    lunes, 18 de febrero de 2013 19:00