HTML input type=number step prevents form from submitting

Question

I have this code in HTML:

<input type="number" step="0.1" class="form-group">

I want the user to be able to enter a 3-digit decimal number like 1.234 but step needs to be 0.1 and it throws an error and prevents the form from submitting.

I've already tried step="0.100" but the result was the same.

I also need to validate other inputs so I can't use no validate in the <form> tag.

What needs to be done?

Answer 1

I'd write a small customized built-in custom element doing just that:

class MyInput extends HTMLInputElement {
  constructor(step = 0.1, value = '') {
    super();
    this.type = 'number';
    this.step = this.getAttribute('step') || step;
    this.value = this.getAttribute('value') || value;
    this.addEventListener('input', (e) => {
      this.value = parseFloat(this.value) + 0.034;
    })
  }
}

customElements.define('my-input', MyInput, { extends: 'input' });

let input = new MyInput(0.1, 1);
document.body.appendChild(input);

<!-- if you want to use declaratively: -->
<input is="my-input" step="0.1" value="2" />
<hr />

This definitely needs some tweaking, e.g. if the user types in the input, but this should serve you well as a starting point.

Answer 2

One thought is you could remove the step attribute, disable the +/- slider buttons, and implement your own +/- buttons. Then, when a user clicks those buttons, a JavaScript function is called that retrieves the value in the input area, converts it to a number, and performs the desired step.

You might run into precision issues with using a step like 0.1. In the below snippet I just fixed the number of decimal places to two.

function stepUp(step) {
  let num = Number(document.getElementById('value').value);
  document.getElementById('value').value = (num + step).toFixed(2);
}

function stepDown(step) {
  let num = Number(document.getElementById('value').value);
  document.getElementById('value').value = (num - step).toFixed(2);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<button onclick="stepDown(0.1)">-</button>
<input id="value" type="number" value="0.00">
<button onclick="stepUp(0.1)">+</button>