html输入号，min +步骤，使步骤忽略min？
html输入号，min +步骤，使步骤忽略min？
提问于 2017-09-10 20:42:07
是否可以让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来完成相同的事情，而不考虑其他属性。
那么有什么简单的方法可以做到吗？谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-10 20:58:33
step考虑了min和max属性的值。这是默认的浏览器行为，我不认为尝试绕过它是个好主意。
我将添加一个data-min属性，其值为2，并将min设置为0。现在可以检查输入的值是否小于自定义的min值，并在需要时更改该值。
因为现在的最小值是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"/>
Stack Overflow用户
发布于 2017-09-10 21:05:12
您可以使用JS强制使用min。我做了一个小实验，它的工作方式是你想要的：https://jsfiddle.net/h2n2cmd2/2/
HTML：
<input type="number" id="input">联署材料：
var min = 2;
var step = 5;
var inputObj = document.getElementById("input");
inputObj.step = step;
inputObj.oninput = function() {
if (inputObj.value < min) {
inputObj.value = min;
}
} Stack Overflow用户
发布于 2017-09-11 01:01:19
因此，我最终做出了我的"step指令“，因为我不知道如何获得控件的句柄来触发.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，如果您需要的话。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46145390
复制相关文章
相似问题
腾讯云开发者
