このように min属性 を使用してください。
<input type="number" min="0">
私は @ 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 によって提供される説明：
どのキーコードがチェックされています：
- 95、<106はテンキー0から9に対応します。
- 47、<58は数値行の0から9に対応します。そして8はBackspaceです。
そのため、このスクリプトは無効なキーが入力されるのを防ぎます。
私にとって解決策は次のとおりです。
<input type="number" min="0" oninput="this.value = Math.abs(this.value)">
このコードは私にとってはうまく機能しています。確認してください。
<input type="number" name="test" min="0" oninput="validity.valid||(value='');">
簡単な方法：
<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">負数が入力された場合、10進数を許可し、入力全体をクリアしたくないと思いました。これは少なくともクロムでうまくいく：
<input type="number" min="0" onkeypress="return event.charCode != 45">
参考までに。jQueryを使用すると、フォーカスアウト時の負の値を次のコードで上書きできます。
$(document).ready(function(){
$("body").delegate('#myInputNumber', 'focusout', function(){
if($(this).val() < 0){
$(this).val('0');
}
});
});
これはサーバー側の検証に代わるものではありません！
@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関数として。
言ったように、それは同じことをします。それは問題を解決する方法についての個人的な好みです。
これが角度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();
}
}
}
app.module.tsの宣言にOnlyNumberを追加して、アプリのどこにでもこのように使用します。
<input OnlyNumber="true">
あなたは入力にmin属性を使うべきです
<input type='number' min='0'/>
<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">これは数だけを許す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;
}
oninput="this.value=(this.value < Number(this.min) || this.value > Number(this.max)) ? '' : this.value;"
このソリューションは、キーボードによるコピーペーストを含むすべてのキーボード機能を可能にします。マウスで負の数を貼り付けるのを防ぎます。これはすべてのブラウザで動作し、 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>
ジャバスクリプト
$(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;
}
});
});
これを行う別の方法を追加するだけ（Angularを使用） HTMLをさらにコードで汚したくない場合：
フィールドvalueChangesをサブスクライブし、Valueを絶対値として設定する（新しいイベントを発行しないように注意してください。別のvalueChangeが発生するため、再帰呼び出しが発生し、最大呼び出しサイズを超えます。エラー）
HTMLコード
<form [formGroup]="myForm">
<input type="number" formControlName="myInput"/>
</form>
TypeScript CODE（コンポーネント内）
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'];
}