Necesito agregar una clase css a los elementos enfocados por tecla de tabulación. Puedo hacer esto con eventos de enfoque y enfoque usando jquery.
Pero no necesito agregar la clase cuando enfoco con el clic del mouse. ¿Cómo puedo conseguir esto? A continuación se muestra mi código
$('#main-nav').focusin( function () { $(this).find('.submenu').addClass('focused'); } ); $('#main-nav').focusout( function () { $(this).find('.submenu').removeClass('focused'); } );Gracias de antemano...
$(window).keyup(function(e) { var pressedKey = (e.keyCode ? e.keyCode : e.which); if (pressedKey == 9 && $('.something').is(':focus')) { $('.something').each(function() { $(this).removeClass('focused'); }); $('.something:focus').addClass('focused'); } else if (pressedKey == 16 && pressedKey == 9 && $('.something').is(':focus')) { var pressedKey = (e.keyCode ? e.keyCode : e.which); if (pressedKey == 9 && $('.something').is(':focus')) { $('.something').each(function() { $(this).removeClass('focused'); }); $('.something:focus').addClass('focused'); } } }); body { margin: 0; padding: 0; } input { display: block; margin: 10px; font-size: 20px; background-color: #efefef; } .focused { background-color: #a0a; } <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form> <input class="something" name="foo"> <input class="something" name="bar" id="somethingWaitingForFocus"> <input class="something" name="baz"> </form> </body> </html>