Answers:
我对@Abhrabm的答案不满意,因为:
它只是防止负号从上/下箭头被输入,而用户可以从键盘键入负数。
解决的办法是防止用关键代码:
// Select your input element.
var number = document.getElementById('number');
// Listen for input event on numInput.
number.onkeydown = function(e) {
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
<form action="" method="post">
<input type="number" id="number" min="0" />
<input type="submit" value="Click me!"/>
</form>
@Hugh Guiney提供的说明:
正在检查哪些关键代码:
因此,该脚本可防止在输入中输入无效的键。
min="0"
。
|| (e.keyCode>36 && e.keyCode<41)
这不允许用户通过向上/向下箭头增加/减少数字并向右/向左编辑数字。
对我来说,解决方案是:
<input type="number" min="0" oninput="this.value = Math.abs(this.value)">
<input ng-model="row.myValue" type="{{row.code == 1 ? 'text' : 'number'}}" min="0" ng-pattern="..." noformvalidate oninput="if (this.type=='text') this.value=Math.abs(this.value) ">
这段代码对我来说很好用。能请您检查一下:
<input type="number" name="test" min="0" oninput="validity.valid||(value='');">
-
并不是一个好主意。
<input type="number" name="test" min="0" oninput="validity.valid||(value=value.replace(/\D+/g, ''))">
-这将删除所有非数字的符号
min="0"
好了,所以没有否定词。如果要为负值,则删除此属性。
我想允许使用十进制数字,如果输入了负数,则不清除整个输入。至少在chrome中效果良好:
<input type="number" min="0" onkeypress="return event.charCode != 45">
keypress
是唯一可以在输入中输入负数的方法吗?
@Manwal的答案很好,但是我喜欢用更少的代码行来提高可读性。我也喜欢在HTML中使用onclick / onkeypress用法。
我建议的解决方案执行相同的操作:添加
min="0" onkeypress="return isNumberKey(event)"
到html输入并
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode;
return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
作为javascript函数。
就像说的那样。解决问题只是个人喜好。
仅供参考:使用jQuery,您可以使用以下代码覆盖对焦点的负值:
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});
这不能代替服务器端验证!
这是一个角度2解决方案:
创建一个类OnlyNumber
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
// Allow decimal numbers. The \. is only allowed once to occur
private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
// Allow key codes for special events. Reflect :
// Backspace, tab, end, home
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
// Do not use event.keycode this is deprecated.
// See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
let current: string = this.el.nativeElement.value;
// We need this because the current value on the DOM element
// is not yet updated with the value from this event
let next: string = current.concat(event.key);
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
将OnlyNumber添加到app.module.ts中的声明中,并在应用中的任何地方像这样使用
<input OnlyNumber="true">
oninput="this.value=(this.value < Number(this.min) || this.value > Number(this.max)) ? '' : this.value;"
如果您不想用更多代码弄脏HTML,只需添加另一种方式(使用Angular)即可:
您只需要订阅valueChanges字段并将Value设置为绝对值(请注意不要发出新事件,因为这将导致另一个valueChange从而导致递归调用并触发“超出最大大小”错误)
HTML代码
<form [formGroup]="myForm">
<input type="number" formControlName="myInput"/>
</form>
TypeScript代码(在组件内部)
formGroup: FormGroup;
ngOnInit() {
this.myInput.valueChanges
.subscribe(() => {
this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
});
}
get myInput(): AbstractControl {
return this.myForm.controls['myInput'];
}
<input type="number" name="credit_days" pattern="[^\-]+"
#credit_days="ngModel" class="form-control"
placeholder="{{ 'Enter credit days' | translate }}" min="0"
[(ngModel)]="provider.credit_days"
onkeypress="return (event.charCode == 8 || event.charCode == 0 ||
event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <=
57" onpaste="return false">
答案无济于事。因为它仅在使用上/下键时才起作用,但是如果您输入-11,则将不起作用。所以这是我使用的一个小修正
这个整数
$(".integer").live("keypress keyup", function (event) {
// console.log('int = '+$(this).val());
$(this).val($(this).val().replace(/[^\d].+/, ""));
if (event.which != 8 && (event.which < 48 || event.which > 57))
{
event.preventDefault();
}
});
当你有价格的时候这个
$(".numeric, .price").live("keypress keyup", function (event) {
// console.log('numeric = '+$(this).val());
$(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));
if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
该解决方案允许所有键盘功能,包括键盘复制粘贴。它可以防止用鼠标粘贴负数。它适用于所有浏览器,codepen上的演示使用引导程序和jQuery。这应该与非英语语言设置和键盘一起使用。如果浏览器不支持粘贴事件捕获(IE),则将焦点对准后将其删除。此解决方案的行为与本机浏览器在min = 0 type = number时的行为相同。
标记:
<form>
<input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
<input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>
Java脚本
$(document).ready(function() {
$("input.positive-numeric-only").on("keydown", function(e) {
var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
e.preventDefault();
}
});
$("input.positive-numeric-only").bind("paste", function(e) {
var numbers = e.originalEvent.clipboardData
.getData("text")
.replace(/[^0-9^.^,]/g, "");
e.preventDefault();
var the_val = parseFloat(numbers);
if (the_val > 0) {
$(this).val(the_val.toFixed(2));
}
});
$("input.positive-numeric-only").focusout(function(e) {
if (!isNaN(this.value) && this.value.length != 0) {
this.value = Math.abs(parseFloat(this.value)).toFixed(2);
} else {
this.value = 0;
}
});
});
对于仅允许数字的QTY字段,这是最适合我的解决方案。
// Only allow numbers, backspace and left/right direction on QTY input
if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
|| (e.keyCode > 47 && e.keyCode < 58) // numbers
|| [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
|| (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
|| (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
|| (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
|| (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
)) {
return false;
}
If Number is Negative or Positive Using ES6’s Math.Sign
const num = -8;
// Old Way
num === 0 ? num : (num > 0 ? 1 : -1); // -1
// ES6 Way
Math.sign(num); // -1