目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
我在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">
其他回答
在输入类型中添加此代码;
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
例如:
<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
这个解决方案可能看起来有点多余,但它照顾到了每个方面。
在表单中使用this
<input type="number" min="0" (keypress)="onlyDigits($event)" >
在。ts中定义函数
onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}
这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-','+'和'e')
对于文本类型的输入,你可以使用它来更好地验证,
return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();
如果需要文本输入,该模式也可以工作
<input type="text" pattern="\d+">
试试这个:
Yii2 : Validation rule
public function rules() {
return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
];
}