0
849
VistasSafari: el evento de enfoque no funciona en el elemento del botón
El evento de enfoque funciona bien en todos los navegadores excepto en Safari cuando se ha hecho clic en él.
Y funciona bien en el elemento div[tabindex], pero no funciona en el elemento button o input:button.
También puede obtener el evento de enfoque cuando uso $('.btn').focus().
¿Por qué el evento de enfoque no se ha activado al hacer clic?
Aquí está mi código:
$(".btn").focus(function (e) { $(".result").append("<p>Event:"+e.type+", target:"+e.target+"</p>"); }) .result{min-height:200px;border:1px solid #000;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="btn">button 1</button> <input type="button" class="btn" value="button 2"/> <div class="btn" tabindex="0">div element</div> <h1> Result: </h1> <div class="result"> </div>3 Respuestas
Responde la pregunta0
La documentación indica que no es compatible: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
0
¿Por qué el evento de enfoque no se ha activado al hacer clic?
Descubrimos a través de la investigación que Safari y FireFox en Mac no se enfocan en los botones cuando haces clic en ellos.
La forma en que solucionamos eso fue agregar un detector de clics a nuestros botones y llamar a focus() en el botón en el que se hizo clic.
En Angular se veía así:
<button (click)="myClickFunction(); $event.target.focus();>My Button</button>0
Consulte https://bugs.webkit.org/show_bug.cgi?id=13724
Esto funciona según lo previsto en MacOS. Al hacer clic en un botón, un botón de opción o una casilla de verificación, el elemento no se enfoca; por lo tanto, no puede perder el enfoque y desencadenar un desenfoque.
La solución es darle un evento de clic que le dé el foco al elemento.