Question

我在HTML中有以下代码：

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

我希望用户能够输入一个三位数的十进制数字，例如1.234，但是step必须为0.1，这会引发错误并阻止表单提交。

我已经尝试过step="0.100"，但结果是相同的。

我还需要验证其他输入，以便不能在no validate标记中使用<form>。

需要做什么？

Answer 1

一个想法是，您可以删除step属性，禁用+/-滑块按钮，并实现自己的+/-按钮。然后，当用户单击这些按钮时，将调用JavaScript函数，该函数检索输入区域中的值，将其转换为数字，然后执行所需的步骤。

使用0.1之类的步骤可能会遇到精度问题。在下面的代码段中，我将小数位数固定为2。

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>

Answer 2

我会写一个小的自定义内置自定义元素：

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 />

这肯定需要一些调整，例如如果用户键入了输入，但这应该是您的起点。

Answer 3

您可以使用novalidate并在js中为其他表单字段编写自己的验证

<form novalidate>
    <input type="number" step="0.1" class="form-group" >
    <button>submit</button>
</form>

HTML input type = number步骤阻止表单提交

3 个答案: