javascript - attribute - title html
¿Cómo hacer para que los botones no tomen el foco? (8)
¿Tal vez debería intentar usar las propiedades de cambio de estado y estado para los campos de formulario o lo que sea para volver a concentrarse?
Quiero que los botones de la barra de herramientas (ExtJS) no capturen el foco en la página web cuando se haga clic en ellos, sino que hagan su "cosa" mientras dejan el foco sin cambiar con el clic. ¿Cómo puedo hacer eso?
Adjuntaría un detector de eventos de desenfoque a todos los campos. Este oyente debería guardar el campo, que perdió el foco, en una variable global.
Luego, todo el botón de la barra de herramientas debería obtener un detector de eventos de enfoque. Este oyente debe enfocar el campo, que se guardó como se describe anteriormente.
Este código debería funcionar, aunque no lo probó.
Debido a que los botones de la barra de herramientas solo tienen un estilo de elementos de botón HTML ordinarios, este es un comportamiento real del navegador, y debe pensarlo dos veces antes de cambiarlo. Pero sin embargo...
Debería poder evitar que el botón reciba el foco simplemente devolviendo false desde su controlador onclick .
Esto usualmente hace el truco para mí:
<button
tabindex="-1"
onclick="javascript:console.log(''do your thing'')"
>My Button</button>
De https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex :
Un valor negativo (generalmente
tabindex="-1") significa que el elemento debe ser enfocable, pero no debe ser accesible a través de la navegación secuencial del teclado. En su mayoría es útil crear widgets accesibles con JavaScript.
No creo que haya una manera fácil de hacer lo que quieres hacer porque es el comportamiento predeterminado del navegador.
Por supuesto, podría desdibujar () el botón tan pronto como se haga clic en él, pero eso simplemente deseleccionará todo. Para que el objeto previamente activo recupere el enfoque, tendría que crear una "memoria" de clases agregando un controlador de desenfoque para cada elemento para realizar un seguimiento de qué elemento tuvo / perdió el foco por última vez (almacenar la identificación del elemento en una y actualizarlo cuando un elemento pierde el foco).
document.activeElement almacena el elemento enfocado actualmente.
Así que en su barra de herramientas, puede agregar un controlador "mousedown" a esta función:
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
Prueba este ejemplo:
<html>
<head>
<script>
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert(''clicked'')" value="Toolbar" />
</body>
</html>
La cancelación del comportamiento predeterminado de onmousedown evita que un elemento obtenga el foco:
// Prevent capturing focus by the button.
$(''button'').on(''mousedown'',
/** @param {!jQuery.Event} event */
function(event) {
event.preventDefault();
}
);
<script>
function focusor(){
document.getElementById(''focus'').focus;
}
document.onkeydown = focusor;
document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
<button id="focus"></button>
</div>
Lo que he encontrado es que tendrá que hacer un elemento ficticio, encontré que los botones funcionan mejor en esta situación. ponga el botón en un div y haga el div 0px.
[no hagas que el div muestre ninguno, algunos navegadores simplemente lo ignorarán]
Básicamente, cualquier clic o botón presiona, se enfocará en este botón ficticio. Tuve un proyecto muy similar y cada vez que presionaban la tecla hacia abajo seleccionaba el primer botón de la página, esto solo enfoca el botón una y otra vez.
Tipo de jacked up, pero funciona.