input type =“ number”が負の値になるのを防ぐ方法はありますか?


回答:


658

次のようなmin属性を使用します

<input type="number" min="0">


222
これは、矢印ボタン/スピナーを使用して負の数が入力されるのをブロックします。ただし、ユーザーは手動で負の数を入力し、そのフィールドの値を負の数として読み取ることができるため、min属性をバイパスできます。
ecbrodie 2015

52
第@demaniakそして、それは半分の質問に答える際に、この答えは非常に多くのupvotesを取得したのか謎である
後藤

1
@Abrahamフォームに-ve値がロードされたデータは、赤としてマークされません。
Kamini、

2
これは機能しません。ユーザーは引き続き手動で負の数を入力できます。
Altef 4

129

次の理由により、@ 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はNumpad 0〜9に対応します。
  • 47、<58は、番号行の0〜9に対応します。8はBackspaceです。

したがって、このスクリプトは無効なキーが入力に入力されるのを防ぎます。


20
賛成ですが、チェックされているキーコードを明確にすると役立つと思います。> 95、<106はテンキーの0〜9に対応します。> 47、<58は、数値行の0〜9に対応します。8はBackspaceです。したがって、このスクリプトは、キー以外のキーの入力を妨げています。完全ですが、数値入力をネイティブでサポートしているブラウザでは、アルファベットのキーが既に除外されているため、やり過ぎかもしれません(数値の意味を持つ「e」のような文字を除く)。189(ダッシュ)と109(減算)を防ぐにはおそらく十分でしょう。そしてと組み合わせmin="0"ます。
ヒューギニー

1
@Manwalキーボードを使用した数字のコピーと貼り付けに制限されています。マウスを使用して負の数をコピーして貼り付けることができます。
Beniton

1
@Benitonこの使用例を提供してくれてありがとう。あなたが何をしているかについて少し考えてもらえますか?少し実行可能なコードまたはフィドルを提供してください。コードにフォーム送信レベルの検証を含めることができます。負の数を許可しない場合は、常にバックエンドでチェックインしますが。
Manwal

1
基本的には、フィールドにコピーアンドペーストするだけです。それは本当に特別なケースや何かではありません。キーコードを介して検証を処理する代わりに、onChangeまたはfocusOutを実行して、負の数値をキャッチするための小さな検証関数を作成する方がおそらく良いでしょう。
ulisesrmzroche

1
矢印キーの条件(37、38、39、41)も入力する必要があります。 || (e.keyCode>36 && e.keyCode<41)これは、ユーザーが上/下矢印を使用して数値を増減したり、数値を編集するために右/左に移動したりすることを許可しません。
vusan

86

私にとっての解決策は:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

1
範囲内にない場合はモデルが更新されないため、angularでpatternおよびnoformvalidateを使用すると、本当に最適なソリューションになります。私の場合:<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) ">
sebius

これは、ユーザーがデフォルト値が0であることを知っている場合に最適に機能します。そうしないと、フィールドがクリアされない理由で、バックスペースプレスで混乱します。これを除けば、それが最善のソリューションです。+ 1
Deep 3015 '25年

1
あなたは私の日を救いました
stackmalux 2018

これは、10進数を使用する場合にも最適です。上記の他の回答を使用しましたが、10進数が許可されると機能しなくなりました。この答えを上に移動して、人々がこれをほとんど使用できるようにする方法はありますか?
Subhan Ahmed

31

このコードは私にとってはうまく機能しています。確認してください:

<input type="number" name="test" min="0" oninput="validity.valid||(value='');">

2
これは機能しますが、入力を試みた後に入力全体を空にすること-は、実際には良い考えではありません。
extempl 2017年

9
@extempl常識ではネガがないことを示しているフィールドにネガを入力しようとするユーザーに対する公正な罰のように聞こえます。
KhoPhi 2017年

3
<input type="number" name="test" min="0" oninput="validity.valid||(value=value.replace(/\D+/g, ''))">-これにより、数字以外の記号がすべて削除されます
Oleh Melnyk

@Rexford私は同意しmin="0"ますが、否定的なものがないように設定しました。負の値にしたい場合は、この属性を削除してください。
Chinmay235

1
試してみましたが、小数点付きの数値も入力できませんでした。
クレント

21

簡単な方法:

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">


簡単ですが、それでも負の数値を貼り付けることができます。
ラルフ

10

負の値が入力された場合、10進数を許可し、入力全体をクリアしたくありませんでした。これは少なくともクロムでうまく機能します:

<input type="number" min="0" onkeypress="return event.charCode != 45">

ここでASCII番号を追加するにはどうすればよいですか。たとえば。45 iワナでは46も追加します。どうすればできますか?
Pradeep Singh

3
@PradeepSingh "return [45、46] .indexOf(event.charCode)== -1"
ykayはReinstate Monicaを

箱から出して考えてください。keypress入力に負の数を入力できる唯一の方法はaですか?
ロコC.ブルヤン

6

@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関数として。

言われたように、それは同じことをします。それは問題を解決する方法についての個人的な好みです。


5

参考までに:jQueryを使用すると、次のコードでfocusoutの負の値を上書きできます。

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

これはサーバー側の検証に代わるものではありません。


これは罰金を作品のIFユーザーは、彼らはすぐにフィールドに残っながらEnterキーを押しただし場合は、入力フィールドのうち焦点。彼らはまだ負の数を入力することができます。
NemyaNation

3

ここに角度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">

このために貼り付けを許可する方法はありますか?また、正規表現を/^-?[0-9]+(\.[0-9]*){0,1}$/gに変更して負の数を許可しましたが、動作しないようです。
Dave Nottage 2017

2
oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

2
このコードスニペットは問題を解決する可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
Sudheesh Singanamalla

これは正しい答えかもしれませんが、十分な詳細がありません。これが機能する理由を説明してください。Stack Overflowを使用する場合は、これが実際のナレッジベースであることを考慮してください。知識を共有しない回答はあまり役に立ちません。
Marc LaFleur 2018年

2

これを行う別の方法を追加するだけです(Angularを使用)さらに多くのコードでHTMLを汚したくない場合はです。

valueChangesフィールドサブスクライブし、値を絶対値として設定するだけです(新しいイベントを発行しないように注意してください。これにより、別の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'];
}

1

<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">


1

これに対する答えは役に立ちません。上/下キーを使用した場合にのみ機能しますが、-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();
    }
   });

0

このソリューションでは、キーボードでのコピーと貼り付けを含むすべてのキーボード機能を使用できます。マウスによる負の数値の貼り付けを防ぎます。すべてのブラウザとコードペンのデモで動作しますはブートストラップと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>

JavaScript

$(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;
    }
  });
});

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;
    }

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.