jQueryを使用してHTML inputboxで数字（0-9）のみを許可するには？

ウェブページを作成しているのですが、入力テキストフィールドがあり、(0,1,2,3,4,5...9) 0-9 のような数字のみを許可したいのです。

jQueryを使ってこれを行うにはどうすればよいでしょうか？

Nayish
編集された質問 3日 9月 2011 в 10:13
プログラミング
html jquery validation numeric
15日 6月 2009 в 9:22
16 ビュー
質問へのコメント (18)
ソリューション

Note: これは更新された回答です。以下のコメントは、キーコードを弄った古いバージョンに言及しています；

jQuery

**JSFiddle][1]で試してみてください。

jQueryネイティブの実装はありませんが、以下のinputFilterプラグインを使えば、テキスト<input>の入力値をフィルタリングできます（Copy+Paste、Drag+Drop、キーボードショートカット、コンテキストメニュー操作、入力不可能なキー、キャレット位置、異なるキーボードレイアウト、[IE 9以降のすべてのブラウザ][2]をサポートしています）：

// Restricts input for the set of matched elements to the given inputFilter function.
(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);
      }
    });
  };
}(jQuery));

入力フィルタをインストールするために inputFilter プラグインを使用できるようになりました：

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

以下は参考になりそうな入力フィルターの例です：


return /^-?\d*$/.test(value);                // Integer
return /^\d*$/.test(value);                  // Integer >= 0
return /^\d*$/.test(value) &&                // Integer >= 0 and
emkey08
編集した答え 11日 11月 2019 в 10:10
解説 (30)

これが私が使用する関数です。


// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key = 48 && key = 96 && key
解説 (8)

インライン:

。

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

。

控えめなスタイル(jQueryを使用):

。

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

。

Al Foиce ѫ
編集した答え 5日 8月 2016 в 7:18
解説 (13)

単純なJavaScript正規表現を使用して、純粋に数値の文字をテストできます。

/^[0-9]+$/.test(input);

これは、入力が数値の場合はtrueを返し、そうでない場合はfalseを返します。

またはイベントキーコードの場合は、以下で簡単に使用してください。


     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode
Aaron Harun
編集した答え 11日 6月 2014 в 1:04
解説 (3)

JavaScript関数isNaNを使用します。

if (isNaN($('#inputid').val()))
< strike> if(isNaN(document.getElementById( 'inputid').val())< / strike>。 
if (isNaN(document.getElementById('inputid').value))

更新:。 そして、ここでそれについて話しているがjQueryを使用している素晴らしい記事:[HTMLテキストボックスの入力を数値に復元][2]。

[2]:http://west-wind.com/weblog/posts/1006040.aspx?utm_source = feedburner& utm_medium = feed& utm_campaign = Feed:%20RickStrahl%20%28Rick%20Strahl%27s%20WebLog%29。

Amr Elgarhy
編集した答え 22日 9月 2016 в 9:58
解説 (6)

これを内部共通jsファイルで使用します。 この動作を必要とするすべての入力にクラスを追加するだけです。

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
解説 (1)
 
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

出典：http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

解説 (4)

私にとってはもっと簡単です。

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
解説 (1)

なぜそんなに複雑なのか? HTML5パターン属性があるため、jQueryは必要ありません。

<input type="text" pattern="[0-9]*">

クールなのは、モバイルデバイスに数値キーボードを表示することです。これは、jQueryを使用するよりもはるかに優れています。

解説 (4)

この非常にシンプルなソリューションを使用して、同じことを行うことができます。

。

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

。

解決策については、このリンクを参照しました。 それは完全に機能します。!!!

Al Foиce ѫ
編集した答え 5日 8月 2016 в 7:20
解説 (3)

HTML5のパターン属性は、< input>要素の値がチェックされます。

  <input  type="text" pattern="[0-9]{1,3}" value="" />

注:pattern属性は、テキスト、検索、URL、tel、電子メール、およびパスワードの入力タイプで機能します。

  • [0-9]は、任意の正規表現条件に置き換えることができます。

  • {1,3}は最小1を表し、最大3桁を入力できます。

vickisys
編集した答え 3日 8月 2016 в 8:53
解説 (2)

HTML5 number入力を試すことができます。

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

非準拠のブラウザーには、ModernizrとWebforms2のフォールバックがあります。

解説 (1)

jQuery.validateを使用すると、かなり単純なものになります。

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
解説 (0)

このJavaScript関数を使用することができます：

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

そして、この関数を次のようにテキストボックスにバインドします：

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

私は上記を実運用で使っていますが、完璧に動作しますし、クロスブラウザにも対応しています。さらに、jQueryに依存しないので、インラインJavaScriptでテキストボックスにバインドできます：

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
解説 (1)

他のソリューションのようにユーザーがテキストを選択したり、貼り付けをコピーしたりすることを妨げない、非常に優れたシンプルなソリューションを見つけました。 jQueryスタイル:)。

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
解説 (1)

関数は抑制しますNonNumericInput(イベント){。


    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode = 48 && event.keyCode = 96 && event.keyCode
解説 (1)

みんなに役立つと思います。

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which57)) ? false : true ;
  })
解説 (1)

これが、少し前に作成した簡単なソリューションです。 詳細については、私の記事をご覧ください。

http://ajax911.com/numbers-numeric-field-jquery/。

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});
解説 (0)

jQuery UIウィジェットファクトリーを使用する回答を次に示します。 許可されている文字を簡単にカスタマイズできます。

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

それは数、数記号、ドルの金額を可能にします。

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});
解説 (1)

上記の@ user261922の投稿に基づいて私のものを書き、少し変更して、すべて、タブを選択し、同じページで複数の「番号のみ」フィールドを処理できるようにしました。


var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode = 48 && event.keyCode = 96 && event.keyCode
解説 (0)