テキストボックスの「数字」のみの入力を制限する最良の方法は何ですか？

小数点を許可するものを探しています。

私はたくさんの例を見ます。しかし、どちらを使用するかはまだ決めていません。

Praveen Jeganathanからの更新

プラグインはもうありません。jQueryは独自jQuery.isNumeric()にv1.7で追加されたものを実装しています。参照：https : //stackoverflow.com/a/20186188/66767

更新

このための新しい非常にシンプルなソリューションがあります。

さまざまな数値フィルターを含め、テキストで任意の種類の入力フィルターを使用できます<input>。これにより、コピー+貼り付け、ドラッグ+ドロップ、キーボードショートカット、コンテキストメニューの操作、入力できないキー、およびすべてのキーボードレイアウトが正しく処理されます。

この回答を参照するか、JSFiddleで自分で試してください。

jquery.numericプラグイン

jquery.numericプラグインを使用して、多くのフォームを正常に実装しました。

$(document).ready(function(){
    $(".numeric").numeric();
});

さらに、これはテキストエリアでも機能します！

ただし、Ctrl + A、コピー+貼り付け（コンテキストメニューを使用）、ドラッグ+ドロップは期待どおりに機能しないことに注意してください。

HTML 5

HTML 5標準の幅広いサポートにより、要素のpattern属性とnumberタイプを使用して、input数値のみの入力を制限できます。一部のブラウザー（特にGoogle Chrome）では、数値以外のコンテンツの貼り付けも制限します。その他numberの新しい入力タイプの詳細については、こちらをご覧ください。

（検証ではなく）入力を制限する場合は、キーイベントを処理できます。このようなもの：

<input type="text" class="numbersOnly" value="" />

そして：

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

これにより、ユーザーは、検証フェーズの後半ではなく、アルファベットなどを入力できないことをすぐに知ることができます。

マウスでカットアンドペーストするか、キーイベントをトリガーしない可能性のあるフォームオートコンプリーターによって入力が入力される可能性があるため、引き続き検証する必要があります。

最良の答えはこれを行うための上記のものであると思いました。

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

でも、矢印キーと削除ボタンを使ってカーソルを文字列の最後にスナップするのは少し面倒なことだと私は同意します（そのため、テストで私に蹴り返されました）。

簡単な変更を加えました

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

このように、テキストが変更されないボタンヒットがある場合は、無視してください。これを使用すると、最後にジャンプせずに矢印を押して削除できますが、数値以外のテキストはすべて消去されます。

jquery.numericプラグインには、筆者に通知したいくつかのバグがあります。SafariとOperaでは複数の小数点を使用でき、Operaではバックスペース、矢印キー、またはその他のいくつかの制御文字を入力できません。正の整数の入力が必要だったので、結局自分で書いてしまいました。

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

これ以上のプラグイン、jQueryの独自の実装していjQuery.isNumericは（） V1.7で追加しました。

jQuery.isNumeric( value )

引数が数値かどうかを判別します。

サンプル結果

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

isNumeric（）をイベントリスナーに関連付ける方法の例を次に示します。

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

上記のnumeric（）プラグインは、Operaでは機能しません（バックスペース、削除、または戻るキーや進むキーを使用することはできません）。

以下のJQueryまたはJavaScriptのコードは完全に機能します（2行だけです）。

jQuery：

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

JavaScript：

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

もちろん、これは純粋な数値入力（プラスバックスペース、削除、前方/後方キー）の場合のみですが、ポイントとマイナス文字を含めるように簡単に変更できます。

検証プラグインとそのnumber（）メソッドを使用できます。

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

数値入力制限のための長いコードは必要ありません。このコードを試してください。

また、有効なintとfloatの両方の値を受け入れます。

Javascriptアプローチ

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQueryアプローチ

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

更新

上記の回答は、最も一般的な使用例であり、入力を数値として検証します。

しかし、以下は特別なユースケースのコードスニペットです

• 負の数を許可する
• 無効なキーストロークを表示してから削除してください。

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

以下は、文字通りキーストロークをブロックするために使用するものです。これは、0〜9の数字と小数点のみを許可します。多くのコードではなく、実装が簡単で、魅力のように機能します。

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

この提案のわずかな改善として、検証プラグインをそのnumber（）、digits、およびrangeメソッドで使用できます。たとえば、次の例では0〜50の正の整数を取得します。

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

あなたはアルファベットの不思議な外観とキーダウンでの消失を見ることはありません。これはマウスペーストでも機能します。

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

私は最初にjQueryを使用してこれを解決しようとしましたが、キーアップで削除される直前に、不要な文字（数字以外）が実際に入力フィールドに表示されることに満足していませんでした。

私はこれを見つけた他の解決策を探しています：

整数（負ではない）

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

ソース：https : //developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example ライブ例：http : //jsfiddle.net/u8sZq/

小数点（負ではない）

小数点を1つ許可するには、次のようにします。

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

出典：ちょうどこれを書いた。動作しているようです。ライブの例：http : //jsfiddle.net/tjBsF/

その他のカスタマイズ

• さらに多くの記号を入力できるようにするには、基本的な文字コードフィルターとして機能する正規表現に記号を追加するだけです。
• 単純なコンテキスト制限を実装するには、入力フィールド（oToCheckField.value）の現在のコンテンツ（状態）を確認します

あなたがやりたいことがいくつかあります：

• 小数点は1つしか使用できません
• 文字列の先頭にある場合にのみマイナス記号を許可します。これは負の数を可能にします。

欠点

• キャレット位置は関数内では使用できません。これにより、実装できるコンテキスト制限が大幅に削減されます（たとえば、2つの等しい連続シンボルがない）。アクセスするための最良の方法がわからない。

タイトルがjQueryソリューションを求めていることは知っていますが、うまくいけば誰かがこれが役に立つと思うでしょう。

投稿をありがとうDave Aaron Smith

数値セクションの小数点と数値を受け入れるように回答を編集しました。この作品は私にぴったりです。

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

そして、これを必要なすべての入力に適用します。

$('selector').ForceNumericOnly();

2015年10月のCanIUseによると、HTML5は入力タイプ番号をサポートし、グローバルブラウザーは88％以上をサポートしています。

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

これはJQuery関連のソリューションではありませんが、携帯電話ではAndroidキーボードが数値の入力用に最適化されるという利点があります。

あるいは、新しいパラメータ「パターン」で入力タイプのテキストを使用することが可能です。HTML5仕様の詳細。

この質問では提供されているjqueryソリューションは数千のセパレータをサポートしていないため、jqueryソリューションよりも優れていると思います。html5を使用できる場合。

JSFiddle： https

この関数は同じことを行い、上記のアイデアのいくつかを使用します。

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• 視覚的なフィードバックを表示する（消える前に間違った文字が表示される）
• 小数を許可
• 複数の "。"をキャッチします
• 左/右デルなどに問題はありません

/ *これは、jQueryを使用してHTML入力ボックスで数値（0〜9）のみを許可する方法のクロスブラウザーバージョン です。
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

parseFloat（）でコンテンツを実行するだけです。NaN無効な入力で戻ります。

あなたはdecorplanit.comからautoNumericを使うことができます。彼らは、数値、通貨、丸めなどをサポートしています。

私はIE6環境で使用しましたが、CSSの微調整はほとんどありませんでした。

たとえば、CSSクラス numericInputを定義して、フィールドを数値入力マスクで装飾するために使用できます。

autoNumericウェブサイトからの変更：

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

これはこの問題を解決する良い方法だと思います、そしてそれは非常に簡単です：

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

例： JSFiddle

対象となるシナリオ

ここで最も類似した推奨事項は、これらの少なくとも1つに失敗するか、これらすべてのシナリオをカバーするために多くのコードを必要とします。

1. 小数点は1つしか使用できません。
2. ことができますhome、endとarrowキー。
3. 許可しdelete、backspace任意のインデックスで使用されます。
4. （入力が正規表現に一致する限り）任意のインデックスで編集できます。
5. 有効な入力に対してctrl + vおよびshift + insertを許可します（右クリック+貼り付けと同じ）。
6. keyupイベントが使用されないため、テキスト値をちらつきません。
7. 無効な入力後に選択を復元します。

失敗したシナリオ

• 0.5ゼロから始めて削除するだけでは機能しません。これは、正規表現をに変更し、テキストボックスが小数点で始まる場合に（必要に応じて）、/^[0-9]*\.?[0-9]*$/先頭にaを付加するblurイベントを追加することで修正できます0。これ を修正する方法のより良いアイデアについては、この高度なシナリオを参照してください。

プラグイン

これを簡単にするために、この単純なjqueryプラグインを作成しました。

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

最善の方法は、フォーカスを失ったときにテキストボックスの内容を確認することです。

正規表現を使用して、内容が「数値」かどうかを確認できます。

または、基本的にこれを自動的に行う検証プラグインを使用することもできます。

データベース使用のためにこの検索コードを確認してください：

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

これは、テキストフィールドの整数パーセント検証のために（Peter Mortensen / Keith Bentrupのコードの一部を使用して）実行したスニペットです（jQueryが必要です）。

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

このコード：

• メインのテンキーとテンキーを使用できます。
• シフト数値文字（＃、$、％など）を除外するための検証
• NaN値を0に置き換えます
• 100より大きい100の値で置き換えます

これが困っている人たちに役立つことを願っています。

ここで素晴らしいソリューションを見つけましたhttp://ajax911.com/numbers-numeric-field-jquery/

必要に応じて「キーアップ」を「キーダウン」に変更しました

HTML5を使用している場合、検証を実行するために長い時間をかける必要はありません。ただ使う-

<input type="number" step="any" />

step属性を使用すると、小数点を有効にすることができます。

入力のキャレット位置を維持する他の方法：

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

利点：

1. ユーザーは、矢印キー、Backspace、Deleteなどを使用できます。
2. 数字を貼り付けたいときに機能します

プランカー：デモ作業

さらに良いプラグインを見つけました。より多くのコントロールを提供します。数値にする必要があるDOBフィールドがあり、「/」または「-」文字も受け入れるとします。

それはうまくいきます！

http://itgroup.com.ph/alphanumeric/で確認してください。

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

このコードは私にはかなりうまくいきました、ピリオドを使用するためにcontrolKeys配列に46を追加する必要がありましたが、それを行うための最良の方法ではないと思います;）

私はこれを使って、良い結果を得ました。

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

これは、JavaScriptの組み込み関数「isNaN」がすでに存在するという点で非常に単純です。

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});