Estoy intentando bloquear la entrada del usuario cuando cssDisableUserInput
es true
.
Básicamente, dentro de mis etiquetas principales tengo esto:
<div id=userinput disabled={cssDisableUserinput}> <div id="map"> </div>
dentro de mi CSS tengo:
<style> #map { width: 1300px; height: 800px; } #userinput{ width: 1300px; height: 800px; pointer-events: none; } </style>
Y, sin embargo, bloquea por completo la entrada del usuario incluso cuando cssDisableUserinput
es false
.
¿Cuál es un mejor enfoque para bloquear la entrada del usuario?
Lo que impide la interacción son pointer-events: none;
, no disabled
. No puede deshabilitar un div
. Es posible que desee extraer esa propiedad en una clase separada y aplicarla condicionalmente usando su indicador cssDisableUserinput
.
<div class:disable-events={cssDisableUserinput}>...</div> <style> .disable-events { pointer-events: none; } </style>
(No conozco la API de Mapbox, tal vez haya un mecanismo incorporado que sería más adecuado para lograr esto. El enfoque anterior aún puede permitir la interacción a través del teclado).