Quiero aplicar estilo a mi elemento cuando lo enfoco usando mi teclado o cuando lo enfoco programáticamente usando HTMLElement.focus() .
Por ejemplo, en el ejemplo siguiente. Quiero que el <div> tenga bordes azules inicialmente o cuando enfoco con la pestaña. Solo quiero que tenga un borde rojo cuando hago clic en <div> con el mouse.
es posible?
EDIT1: se cambió de activar el enfoque con un botón a solo renderizar, ya que este escenario no era exacto para mi problema real.
EDIT2: Cambié de Vanilla JS a React porque pensé que ese podría ser el problema. Parece que todavía funciona como quiero aquí, pero no en mi aplicación :(. No tengo ni idea de por qué.
const useFocusOnMount = (ref) => { React.useEffect(() => { if (ref.current) { ref.current.focus(); } }, [ref]); }; const App = (props) => { const divRef = React.useRef(null) useFocusOnMount(divRef); return ( <div ref={divRef} role="listbox" tabindex="0" className="focusable"> <div data-testid="displayValue">Lol</div> </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); .focusable { border: 1px solid lightgrey; outline: none; } .focusable:focus { border: 2px solid red; } .focusable:focus-visible { border: 2px solid blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>No estoy seguro de por qué quiere esto, y le aconsejaría que busque otra forma de hacer lo que quiere (por ejemplo, ¿por qué no usar solo :focus ?).
Pero para el truco, puede engañar al navegador para que piense que su div es editable, debería * hacer que active su regla focus-visible .
const focusable = document.getElementById('focusable'); const button = document.getElementById('button'); const onClickHandler = (e) => { focusable.contentEditable = true; focusable.focus(); focusable.contentEditable = false; }; button.addEventListener("click", onClickHandler); .focusable { border: 1px solid lightgrey; outline: none; } .focusable:focus { border: 2px solid red; } .focusable:focus-visible { border: 2px solid blue; } <div id="focusable" class="focusable" tabIndex=0>Lol</div> <button id="button">Focus Lol</button>*Solo probé en los últimos Chrome y Firefox.
No puede desenfocar elementos si apunta al elemento en sí.
Debe diseñar el elemento con un detector de eventos en el cuerpo, porque el clic outside está en el cuerpo , no en el elemento en sí.
Puede usar e como this para detectar dónde hacen clic los usuarios.
Si e (clic) !== (es diferente a/no está activado) focs (elemento) contorno = 0.
const focs=document.getElementById('focs'); const focsb=document.getElementById('focsb'); document.body.addEventListener('click',function(e){ if(e.target!==focs&&e.target!==focsb) { focs.style="outline: 0"; } else if (e.target==focs&&e.target!==focsb) { focs.style="outline: 2px solid #000"; } else { focs.style="outline: 2px solid #CC0000"; }; }); <input id="focs" type="text"> <button id="focsb">Focus</button>