Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

209
Vistas
Force the value incremented by "step" input number

I created an input of type number. Minimum value 1, maximum value 100. Step 5. However, I can enter values other than step for this input. Eg 7 instead of 5-10-15.

I would like the manually entered values to be automatically increased to the step value. The user enters 7 - after leaving the input it is 10. I am trying onfocusout but I have no idea how to do it.

<input type="number" min="1" max="100" step="5" onfocusout="this.value = Math.round(step);">

Example. The user enters 13 - gets 15. He enters 27 - gets 30.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

you can :

  • get the result of value divided by 5

  • round the result to near integer

  • and multiply it by 5 to get the nearest 5 value of the input entered by user

    this.value = Math.round(this.value / 5) * 5;
    

<input type="number" min="1" max="100" step="5" onfocusout="var result = Math.round(this.value / 5) * 5; this.value = (result) ? result : this.min ;">

about 4 years ago · Juan Pablo Isaza Denunciar

0

First, instead of listening for focusout events you should listen for change events, which are triggered whenever the user does anything that implies they are done entering a value. This will make the behavior more consistent across browsers and devices.

Second, you can round a value to the nearest multiple of X by doing Math.round(value / X) * X, and you can restrict a value within [A, B] using Math.min(Math.max(A, value), B).

Finally, the min, max and step HTML attributes directly correspond to properties on the JavaScript HTMLInputElement object, which is the object bound to this inside the event listener.

Combinging all of this together, you get this.

<input type="number" min="1" max="100" step="5" onchange="this.value = Math.min(Math.max(this.min, Math.round(this.value / this.step) * this.step), this.max)">

Note that in your code the min attribute is 1 which isn't a multiple of 5, and that tells the browser to accept values in the sequence [1, 6, 11, 16, ...] which breaks our code. If you want multiples of 5, you'll need to make sure the min attribute is a multiple of 5 as well.

All of that JS code inside an HTML attribute is hard to read, so you might want to use a proper event listener at this point, which lets you divide the problem into smaller functions.

function clamp(a, value, b) {
    return Math.min(Math.max(a, value), b);
}

function roundTo(multiple, value) {
    return Math.round(value / multiple) * multiple;
}

function roundToStepOnChange(event) {
    const roundedValue = roundTo(this.step, this.value);
    const clampedValue = clamp(this.min, roundedValue, this.max);
    this.value = clampedValue;
}

document.getElementById("myInput").addEventListener("change", roundToStepOnChange);
<input id="myInput" type="number" min="5" max="100" step="5">

I set the min attribute to 5 in that example so you can see it running without any issues.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda