0
85
VistasEl tipo de rango de entrada HTML se vuelve inutilizable mediante la acción de arrastrar si se resalta en Chrome
Considere el siguiente ejemplo como se muestra en Windows en el navegador Chrome.
<input type="range">Produce un control deslizante de rango. Descubrí que si primero uso mi mouse y
- Mueva el mouse hacia abajo ligeramente debajo del control deslizante de rango
- Con el botón del mouse aún presionado, mueva el mouse a través del control deslizante de rango hasta la parte superior.
- Suelte el ratón
Puedo hacer que el control deslizante de rango deje de funcionar como se esperaba. Muestra un cursor de "círculo con una línea que lo atraviesa" y se niega a permitirme deslizar el controlador hacia la derecha o hacia la izquierda.
Mi teoría aquí es que las primeras acciones que realizo "seleccionan" o "resaltan" el selector de rango, como si seleccionara una sección de texto en el navegador, y luego mis intentos posteriores de operar el control deslizante de rango se interpretan como si quisiera arrastrar la selección.
¿Hay alguna solución o forma de evitar este error?
Hasta ahora intentos como configurar css user-select: none; en el elemento de input no funciona, tampoco llama a e.preventDefault() en el evento de drag .
Ver efecto en GIF:
1 Respuestas
Responde la pregunta0
Después de algunos retoques, pude detener este comportamiento con el siguiente JS:
document.querySelectorAll('input[type="range"]').forEach((input) => { input.addEventListener('mousedown', () => window.getSelection().removeAllRanges()); });