Question

是否可以使step忽略min属性？

<input type="number" min="2" step="5"/>

就像现在一样，它的步骤如下：2, 7, 12, 17, ...
相反，我希望它是：2, 5, 10, 15, 20, ...

我的真实代码实际上使用了动态值，如下所示：

<input type="number" [min]="someValue" [step]="someStep"/>

一种解决方法可能是创建一个指令来替换min或step来做同样的事情，而不考虑其他属性。

那么有一种简单的方法吗？谢谢！

Answer 1

step考虑了min和max属性的值。这是默认的浏览器行为，我认为尝试规避这一点并不是一个好主意。

我会添加data-min属性，其值为2，并将min设置为0。现在可以检查输入的值是否小于自定义最小值，并在需要时更改值。

因为现在最小值为0，这意味着浏览器将遵循您所需的0，5，10，15等序列。

const
  inputElement = document.getElementById('input');
  
function onValueChanged(event) {
  const 
    customMin = parseInt(inputElement.getAttribute('data-min'), 10),
    value = parseInt(inputElement.value);
    
  if (value > customMin) {
    return;
  }
  
  inputElement.value = customMin;
}

inputElement.addEventListener('change', onValueChanged);

<input id="input" type="number" min="0" step="5" data-min="2" value="2"/>

Answer 2

您可以使用JS强制min。我做了一个小实验，它按照你想要的方式工作：https://jsfiddle.net/h2n2cmd2/2/

HTML：

<input type="number" id="input">

JS：

var min = 2;
var step = 5;

var inputObj = document.getElementById("input");

inputObj.step = step;

inputObj.oninput = function() {

    if (inputObj.value < min) {
        inputObj.value = min;
    }
}

Answer 3

所以我最终制作了我的“步骤指令”，因为我不知道如何获得控件的句柄以触发.updateValueAndValidity()并使用.preventDefault()，我不得不使用一种似乎运作良好的解决方法：const fix = isKeyUp ? -1 : 1;

import { Directive, Input, HostListener } from '@angular/core';

const key_arrow_up = 38;
const key_arrow_down = 40;

@Directive({
  selector: '[my-step]'
})
export class MyStepDirective {
  private _step: number;

  @Input() min: number;
  @Input() set myStepArg(value: number) {
    this._step = +value;
  }

  @HostListener('keydown', ['$event']) onKeyUp(ke: KeyboardEvent) {
    const isKeyUp = ke.keyCode === key_arrow_up;
    const isKeyDown = ke.keyCode === key_arrow_down;
    // fix: -1/+1 is to cover for default behavior on arrow up/down
    const fix = isKeyUp ? -1 : 1;

    if (isKeyUp || isKeyDown) {
      const value = +ke.target['value'];
      const isValid = value !== undefined && !isNaN(value);
      if (isValid) {
        const nValue = isKeyUp ? this._getNextUp(value) : this._getNextDown(value);
        if (!this.min || nValue >= this.min)
          ke.target['value'] = nValue + fix;
        else
          ke.target['value'] = this.min + fix;
      }
    }
  }

  constructor() {}

  private _getNextUp(current: number): number {
    return current + this._step - (current % this._step);
  }

  private _getNextDown(current: number): number {
    return current - this._step + (current % this._step);
  }

}

在模板中，我这样使用它：

<input type="number" name="cashTendered" required
  my-step [myStepArg]="cashStep" [min]="sale.total">

修改它应该相当容易，以便它可以处理max，如果你需要它。

html输入数字，min + step，make step ignore min？

3 个答案: