目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
如果需要文本输入,该模式也可以工作
<input type="text" pattern="\d+">
其他回答
我在angular中创建了一个指令,强制输入no“-”。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appPositiveNumber]'
})
export class PositiveNumberDirective {
private regex = new RegExp(/^\d*[.,]?\d*$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
constructor(private el: ElementRef) { }
@HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
if (!event.key.match(this.regex) && !this.specialKeys.includes(event.key)) {
event.preventDefault();
return;
}
}
}
所以u可以像这样将它添加到元素上:
<input type="number" appPositiveNumber min="0" step="1" max="9999"
[(ngModel)]="value.employeeCount">
这取决于你想要多精确。如果你想只接受整数,那么:
<输入类型=“数字” 分钟=“1” 步数=“1”>
例如,如果你想要浮点数,小数点后有两位数字:
<输入类型=“数字” min=“0.01” 步数=“0.01”>
如果您尝试输入负数,onkeyup事件将阻止此操作,如果您在输入数字上使用箭头,onblur事件将解决此部分。
<输入类型=“数字” onkeyup=“if(this.value<0)this.value=1” onblur=“if(this.value<0)this.value=1” >
我认为使用类型文本是最好的,而不是数字,因为使用类型=数字,你将面临一些问题,如输入字段的方向键和上、下键的值变化。
<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />
尝试这个选项,并给出最小值和最大值
<输入类型=“数字” 模式=“\d+” 输入模式=“数字” 值=“123” 自动完成=“关闭” 最大长度=“5” 步骤=“1” min=“0” max=“99999” >