¿Cómo hacer que el elemento no pierda el foco cuando se presiona el botón?

Tengo un área de texto en la que estoy insertando contenido en la ubicación del signo de intercalación (gracias a La respuesta de Tim Down). Inserta el contenido cuando el usuario presiona un botón. Pero parece que cuando se presiona el botón, se pierde el foco en el área de texto. ¿Cómo mantengo el foco allí, siempre que la ubicación del símbolo de intercalación también sea la misma? Estaba pensando en la línea de usar evt.preventDefault() con .focusout(). Si eso ayuda.

preguntado el 28 de agosto de 12 a las 08:08

4 Respuestas

Maneja el ratón hacia abajo-evento en lugar del evento de clic. El evento mousedown se manejará antes de que se pierda el foco de otro elemento.

En su ratón hacia abajo controlador de eventos, debe hacerlo para evitar el comportamiento predeterminado del evento.

e.preventDefault(); // in your mousedown eventhandler

Demostración de JS-Fiddle

contestado el 08 de mayo de 22 a las 09:05

esto tiene el efecto secundario de evitar que se dispare :active - laconbajo

He actualizado el código de ejemplo para mostrar que el selector activo todavía funciona como se esperaba. ¿Quizás me estoy perdiendo algo? Explique su problema con más detalle o proporcione un ejemplo de código. ¡Gracias! - Thomas alemán

Simplemente mantenga el mouse presionado sobre el botón. Verá ese botón: los estilos activos no se aplican. (Firefox 76) - laconbajo

Estás en lo correcto. En Chrome, estuvo bien, actualicé mi respuesta. - Thomas alemán

Funcionó bien para mí, gracias! Solo una advertencia: ¡es un evento de mousedown y no de clic! No lo leí detenidamente y me llevó algo de tiempo hacerlo funcionar. Solo para estar seguro de que esto no te sucederá a ti :) - Ricardo Magalhães

No puede evitar que el enfoque se mueva a un elemento enfocable y aún permitir que el clic del mouse tenga su comportamiento normal (como click el botón). Si hace clic en un elemento que admita el enfoque, como un botón, obtendrá el enfoque del teclado.

Es posible volver a poner el foco en un elemento mediante programación si se hace correctamente. Si se hace mal, puede arruinar la usabilidad de una página.

Demostración: JSFiddle

contestado el 21 de mayo de 20 a las 21:05

¿Puedes decirme como? Lo siento, no lo sé. - Lucas

@ think123: agregué una demostración funcional al final de mi respuesta. - amigo00

Buena respuesta. De todos modos, encontré que unselectable="on" también parece funcionar, al menos para los botones. - Lucas

@ jfriend00 @ think123 Puede evitar que el enfoque se mueva a un elemento enfocable, si .preventDefault() en mousedown: jsfiddle.net/Ddffh/103 . Al hacer clic, es demasiado tarde porque después de presionar el mouse, el foco ya se ha perdido. Puede verificar esto en su propia demostración manteniendo presionado el botón del mouse por un momento antes de soltarlo: cuando presiona el mouse por primera vez, se perderá el foco; después de soltar, se activa el evento de clic. - Han Seúl-Oh

@Han, sería bueno si agregaras tu comentario como respuesta, me ayudó mucho, pero parece que no todos leen los comentarios. - Andrei Rudenko

Tienes que renovar el enfoque cuando se presiona el botón.

Código HTML:

<input id="messageBox" autofocus />
<input type="button" id="messageSend" onclick="setFocusToMessageBox()" value="Send" />

Código Javascript:

<script>
function setFocusToMessageBox(){
    document.getElementById("messageBox").focus();
}
</script>

Respondido 01 Abr '18, 16:04

Puede hacer esto fácilmente volviendo a enfocar el área de texto mediante programación cuando la función de hacer clic en el botón haya terminado. De esta manera, puede recuperar el enfoque junto con el evento de clic cada vez.

Respondido 28 ago 12, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.