目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
这个解决方案可能看起来有点多余,但它照顾到了每个方面。
在表单中使用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” onkeyup=“if(this.value<0){this.value= this.value * -1}”>
Try
<input type="number" pattern="^[0-9]" title= " Only number" min="1" step="1">
(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
如果您尝试输入负数,onkeyup事件将阻止此操作,如果您在输入数字上使用箭头,onblur事件将解决此部分。
<输入类型=“数字” onkeyup=“if(this.value<0)this.value=1” onblur=“if(this.value<0)this.value=1” >
我在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">