Para las entradas de números en HTML, ¿hay alguna forma de que funcione de tal manera que cuanto más tiempo mantenga el usuario las flechas paso a paso, mayor será el tamaño del incremento/paso?
Por ejemplo, comenzamos con un tamaño de paso = 1, pero después de unos segundos de espera, aumentará a 5, 10, 20, ... etc.
es posible? ¡Gracias!
El atributo de step controla la cantidad añadida al valor de la entrada cuando se activa el paso a paso.
Usando el método setInterval , podemos cambiar este valor cada X milisegundos.
Usando un oyente para el evento mousedown de la entrada, podemos iniciar/detener el intervalo y restablecer el paso actual cuando se suelta el mouse.
Aquí hay una muestra:
const input = document.getElementById('my-stepper'); const label = document.getElementById('my-label'); const defaultStep = 1; const maxStep = 100000; let interval; input.addEventListener('mousedown', () => { interval = setInterval(() => { const currentStep = Number(input.step); if (currentStep < maxStep) { input.step = currentStep * 10; label.innerText = `Current step is ${input.step}`; } }, 1000); }); input.addEventListener('mouseup', () => { clearInterval(interval); input.step = defaultStep; label.innerText = `Current step is ${input.step}`; }); <input id="my-stepper" type="number" step="1" value="0"> <p id="my-label">Current step is 1</p>La idea básica está debajo usando detectores de eventos del mouse.
const elem = document.querySelector("#num"); let timer; elem.addEventListener("mousedown", (evt) => { const inp = evt.target; inp.dataset.step = inp.step; const initialValue = Number(inp.value); timer = window.setInterval(()=>{ const dir = Number(inp.value) > initialValue ? 100 : -100; console.log(Number(inp.step) + dir); inp.step = Number(inp.step) + dir; },2000); }); elem.addEventListener("mouseup", (evt) => { if (timer) window.clearTimeout(timer); const inp = evt.target; inp.setAttribute('step', inp.dataset.step); }); <input type="number" step="1" id="num">