html入力番号、min + step、ステップを無視してmin？

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

解決方法の1つは、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

あなたはただ強制することができますmin JSを使用しています。私は少し実験をした、そしてそれはあなたが望んだ道作品：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を扱うことができるように、変更することはかなり簡単にする必要があります。