目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
(function ($) { $.fn.inputFilter = function (inputFilter) { return this.on('input keydown keyup mousedown mouseup select contextmenu drop', function () { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty('oldValue')) { this.value = this.oldValue; //this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } else { this.value = ''; } }); }; })(jQuery); $('.positive_int').inputFilter(function (value) { return /^\d*[.]?\d{0,2}$/.test(value); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="positive_int"/>
以上代码可以正常工作!!它还可以防止插入超过2个小数点。如果你不需要这个,只要删除\d{0,2},或者如果需要更有限的小数点,只要改变2
其他回答
我在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">
添加一个min属性
<输入类型=“数字” min=“0”>
这个解决方案可能看起来有点多余,但它照顾到了每个方面。
在表单中使用this
<input type="number" min="0" (keypress)="onlyDigits($event)" >
在。ts中定义函数
onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}
这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-','+'和'e')
我已经找到了防止负数的另一种解决方案。
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
试试这个:
在Angular 8中测试 值是正的 这段代码还处理null和负值。
<input
type="number"
min="0"
(input)="funcCall()" -- Optional
oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
formControlName="RateQty"
[(value)]="some.variable" -- Optional
/>