0
234
ViewsNo se puede hacer clic o seleccionar elementos de intervalo, después de que un lienzo se enfoca en HTML: ¿depuración?
No suelo trabajar con HTML en estos días, y estoy trabajando con algunas bibliotecas JS que manipulan el lienzo. Hice todo lo que necesitaba, pero me acabo de dar cuenta de que
- Cuando se inicia la página web, se puede seleccionar todo el texto (títulos, subtítulos, notificaciones, etc., básicamente todo el texto en intervalos y divisiones)
- Luego, normalmente hago clic en el lienzo e interactúo con él.
- Pero, si después de hacer clic en el lienzo, trato de ir, por ejemplo, al tramo de título y hago clic en él para seleccionar, el texto ya no se puede seleccionar (y ya no hay texto en la página web, aparte de las entradas de formulario de texto)
Entonces, traté de investigar esto y encontré:
Los campos de entrada HTML no se enfocan cuando se hace clic
La causa raíz del problema es
disableSelection(). Está causando todos los problemas, pero eliminarlo no es una solución, ya que (al menos en 2016 o un poco antes), en los dispositivos con pantalla táctil, "tienes" que usar esto si quieres poder mover objetos con jQuery .
Entonces, disabledSelection aparentemente es jQuery, pero hasta ahora solo he usado javascript de vainilla en mi proyecto (creo, pero algunas de las bibliotecas que uso podrían usar jQuery).
De todos modos, pensé, antes de intentar copiar/pegar a ciegas el código en línea, en un intento de restaurar la capacidad de selección, ¿podría confirmar de alguna manera a través del inspector DOM en el navegador, que un elemento es seleccionable o no? Digamos, así es como se ve mi Firefox Inspector desde Herramientas de desarrollo web:
¿Hay algo accesible en el Inspector, como una propiedad CSS, que me diga si un objeto es seleccionable? De lo contrario, ¿puedo ejecutar rápidamente una sola línea de JavaScript en la Consola del navegador y averiguar el estado de seleccionabilidad de un elemento?
1 answers
Answer question0
Bien, gracias al comentario de @burkay, lo entendí; de hecho, se trata de user-select . Entonces, en Firefox,
- haga clic derecho en un elemento, luego elija Inspeccionar elemento, luego
- Haga clic con el botón derecho en la entrada (correspondiente a este elemento, autoseleccionado) en el Inspector y elija "Usar en Consola"
- Luego obtendrá una variable
temp1en la consola, que puede consultar:
Tenga en cuenta que las propiedades CSS terminan como propiedades de la propiedad .style del elemento; sin embargo, sus nombres ya no incluyen guiones, sino que son CamelCase; por lo tanto, para user-select en el archivo CSS, tenemos .style.userSelect en Console. (también, tenga en cuenta que .mozUserSelect rastrea/copia los valores de userSelect )
Arriba está el registro que obtuve para mi problema; al principio, el objeto tiene .style.userSelect establecido en una cadena vacía y no se puede seleccionar; luego intenté configurarlo en "automático", y permaneció no seleccionable; finalmente lo configuré en "texto", y en ese momento, el texto se volvió seleccionable (crédito a @RaduSimionescu )