Impedir que ciertos elementos reciban atención

6 minutos de lectura

Así que tengo la siguiente función. Lo que hace es escuchar el evento de enfoque en todos los elementos. Si ese elemento está en $mobileMenu o $menuItems lo permite de lo contrario quita el foco:

var $body = $("body");
var $mobileMenu = $("#mobile-menu");
var $menuItems = $("#main-menu a");

$body.on("focus.spf", "*", function(e){
  e.stopPropagation();
  $this = $(this);

  // Prevent items from recieving focus and switching view
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
  } else {
    console.log(this);
  }
})

El problema que tengo es que esto evita que el usuario se concentre en cualquier cosa si un elemento normalmente enfocable que ahora no es enfocable precede a cualquiera de mis elementos de la lista blanca, ya que solo intenta volver a enfocarse en el mismo elemento una y otra vez.

¿Alguien sabe cómo puedo decirle que salte al siguiente elemento enfocable?

  • Tal vez sea la colocación de la stopPropogation() ¿declaración? Estoy un poco confundido por lo que dijiste justo después del código.

    – no funciona

    7 de enero de 2014 a las 0:56


  • @nofunciona stopPropagation() es bueno porque no queremos burbujear y desperdiciar recursos. Básicamente, el índice de pestañas internas se restablece en blur() por lo tanto, cada vez que presiona, intenta enfocarse en el primer elemento tabulado que se vuelve borroso y la próxima vez que presiona, intenta seleccionarlo nuevamente.

    – Jorge Reith

    7 de enero de 2014 a las 1:03


  • e.preventDefault() podría ayudar?

    –Eric

    7 de enero de 2014 a las 1:11

  • @Eric No evita el evento de enfoque, me temo.

    – Jorge Reith

    7 de enero de 2014 a las 1:23

  • Debo señalar que este enfoque podría hacer que la página quede inutilizable para las personas que usan lectores de pantalla. Intentar controlar el enfoque puede interferir con el enfoque del teclado, lo que impide que las personas accedan al resto de la página.

    – AlastairC

    9 de enero de 2014 a las 18:16

Avatar de usuario de npn_or_pnp
npn_o_pnp

Si configura el tabindex a -1 en el elemento, ignorará la pestaña.

No estoy seguro si esto funciona en todos los navegadores, pero funciona en Google Chrome.

<input type="text" value="regular"/>
<input type="text" tabindex="-1" value="with tabindex set to -1"/>

avatar de usuario de davidkonrad
davidkonrad

Esto funciona (actualizado):

$body.on("focus.spt", "*", function(e){
  $this = $(this);
  if (!$this.is($mobileMenu) && !$this.is($menuItems)) {
    $this.blur();
    var next=$this.nextAll().find('a,input');
    if (next.length>0) next[0].focus();
  } else {
    console.log('ok',this);
    e.stopPropagation();
  }
})

(actualizado) violín -> http://jsfiddle.net/CADjc/

Puede ver en la consola qué elementos reciben el foco (main-menu a y mobile-menu)

Probado en:

<input type="text" tabindex="1" value="test">
<span><input type="text" tabindex="2" value="test"></span>
<div><input type="text" id="mobile-menu" tabindex="3" value="mobile-menu"></div>
<div><span>
    <div id="main-menu">
        <a tabindex="4">main-menu</a>
        <a tabindex="5">main-menu</a>
    </div>
</span></div>
<span>
<input type="text" tabindex="6" value="test">
</span>

  • Gracias… pero esto solo funciona porque los elementos están uno al lado del otro (de lo contrario next() no funciona) en flujo … ver jsfiddle.net/e96EV/2

    – Jorge Reith

    7 de enero de 2014 a las 1:55


  • @GeorgeReith tiene razón, estaba probando a ciegas en el marcado de prueba hecho a sí mismo, usted pudo he proporcionado un ejemplo de marcado 🙂 – vea la actualización anterior y el violín actualizado también. ¿Por qué cierra su marcado, por ejemplo, ?? (lo vi en tu actualización de violín)

    – David Konrad

    7 de enero de 2014 a las 3:19


  • Me acabo de dar cuenta de que solo funciona si el elemento enfocable permitido es el primer elemento enfocable en su padre… ver jsfiddle.net/CADjc/2 – Esto se debe a next[0] Creo que solo prueba el primer elemento encontrado. También cerré los elementos porque JSfiddle tiene dificultades para resaltar la sintaxis de los elementos no cerrados (incluso si son válidos).

    – Jorge Reith

    7 de enero de 2014 a las 4:35


  • Ok he arreglado el next[0] pero todavía no se envuelve. Una vez que llega al final, simplemente cambia entre los dos últimos… jsfiddle.net/CADjc/3

    – Jorge Reith

    7 de enero de 2014 a las 5:08

  • El cambio era necesario porque si no obtiene un elemento enfocable en next[0] simplemente se propagará e ignorará cualquier otro elemento hermano potencial. Otro problema es que seleccionará los elementos hermanos que están más tarde en el DOM antes que los elementos secundarios.

    – Jorge Reith

    7 de enero de 2014 a las 7:31

Si desactiva algo, no recibirá el foco. Por ejemplo:

<input type="text" disabled="disabled" />

Agréguelo programáticamente, podría hacer:

var el = document.getElementById('disableme');
el.setAttribute('disabled', 'disabled');

  • Los elementos de entrada deshabilitados no se envían al servidor cuando se envía el formulario. No tiene mucho que ver con el escenario actual, pero es bueno tenerlo en cuenta.

    – Antares42

    13 mayo 2015 a las 22:42

  • Mi consejo sería reemplazar la palabra “algo” con “un elemento de forma”, porque disabled solo se aplica a los elementos de forma, y ​​nada más.

    – Armén Michaeli

    10 de julio de 2016 a las 22:47

attr(“readonly”,”readonly”), evita que el foco de entrada y el valor SE envíen al servidor.

Avatar de usuario de Ghanashyam Sateesh
Ghanashyam Sateesh

Solución de solo CSS de uno de mis proyectos anteriores

/* Prevents all mouse interactions */
.disabled-div {
  opacity: 0.5;
  pointer-events: none;
}

/* Prevents all other focus events */
.disabled-div:focus,
.disabled-div:focus-within {
  visibility: hidden;
}
<h1>CSS Only Disable with Prevent Focus</h1>

<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>
<input placeholder="Normal text field">
<br><br>
<input class="disabled-div" placeholder="Disabled text field">
<br><br>

Parpadea ligeramente cuando recibe el foco. Esto se debe a que cuando recibe el foco, la visibilidad se establece en ‘oculto’ y el foco se pierde y la visibilidad vuelve a establecerse en ‘visible’ nuevamente. Esto es realmente bueno porque el usuario ahora tiene una idea de dónde está el foco mientras revisa los campos deshabilitados…

  • Esto está bien, pero desafortunadamente no funciona en Safari o Firefox.

    – mhenry1384

    5 de mayo a las 17:30

  • Desearía que esto funcionara, pero desactivar la visibilidad no afecta el enfoque en absoluto en algunos navegadores. Creo que cualquier comportamiento que esté viendo en sentido contrario no es estándar.

    – Lummox JR

    21 de septiembre a las 20:28

  • Esto está bien, pero desafortunadamente no funciona en Safari o Firefox.

    – mhenry1384

    5 de mayo a las 17:30

  • Desearía que esto funcionara, pero desactivar la visibilidad no afecta el enfoque en absoluto en algunos navegadores. Creo que cualquier comportamiento que esté viendo en sentido contrario no es estándar.

    – Lummox JR

    21 de septiembre a las 20:28

¿Ha sido útil esta solución?