jquery

Question

（0,1,2,3,4,5 ... 9）0-9のような数字のみを許可する入力テキストフィールドがあるWebページを作成しています。

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

score 1342 · Accepted Answer

^{注：これは更新された回答です。以下のコメントは、キーコードをいじった古いバージョンを参照しています。}

JSFiddleで自分で試してみてください。

<input>これにはネイティブの jQuery 実装はありませんが、次のプラグインを使用してテキストの入力値をフィルタリングできinputFilterます (コピー + 貼り付け、ドラッグ + ドロップ、キーボードショートカット、コンテキストメニュー操作、入力不可キー、キャレット位置、異なるキーボードレイアウト、およびIE 9 以降のすべてのブラウザー):

// 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);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

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

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

その他の入力フィルターの例については、 JSFiddle デモを参照してください。また、サーバー側の検証を行う必要があることにも注意してください!

純粋な JavaScript (jQuery なし)

これには jQuery は実際には必要ありません。純粋な JavaScript でも同じことができます。この回答を参照してください。

HTML5

HTML 5 には<input type="number">(仕様を参照) を使用したネイティブソリューションがありますが、ブラウザーのサポートはさまざまであることに注意してください。

ほとんどのブラウザーは、入力時ではなく、フォームの送信時にのみ入力を検証します。
ほとんどのモバイルブラウザstepは、属性minと属性をサポートしていませんmax。
Chrome (バージョン 71.0.3578.98) では、ユーザーは引き続き文字を入力eしEてフィールドに入力できます。この質問も参照してください。
Firefox (バージョン 64.0) および Edge (EdgeHTML バージョン 17.17134) では、ユーザーはフィールドに任意のテキストを入力できます。

w3schools.comで試してみてください。

score 195 · Accepted Answer

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

// 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 <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

次に、次の手順を実行して、コントロールにアタッチできます。

$("#yourTextBoxName").ForceNumericOnly();

score 172 · Accepted Answer

列をなして：

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

score 105 · Accepted Answer

シンプルな 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 <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

score 100 · Accepted Answer

次のような入力イベントで使用できます。

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

しかし、このコード特権は何ですか？

モバイルブラウザで動作します (keydown と keyCode には問題があります)。
「on」を使用しているため、AJAX で生成されたコンテンツでも機能します。
貼り付けイベントなどで、キーダウンよりもパフォーマンスが向上します。

score 45 · Accepted Answer

JavaScript 関数isNaNを使用します。

if (isNaN($('#inputid').val()))

~~if (isNaN(document.getElementById('inputid').val()))~~

if (isNaN(document.getElementById('inputid').value))

更新： そして、ここでそれについて話しているがjQueryを使用している素晴らしい記事：HTMLテキストボックスの入力を数値に制限する

score 33 · Accepted Answer

$(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

score 30 · Accepted Answer

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

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

score 26 · Accepted Answer

私にとってもっと簡単なのは

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

score 14 · Accepted Answer

HTML5 の pattern 属性は、要素の値をチェックする正規表現を指定します。

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

注: pattern 属性は、次の入力タイプで機能します: text、search、url、tel、email、および password。

[0-9] は、任意の正規表現条件に置き換えることができます。
{1,3} 最小 1 を表し、最大 3 桁を入力できます。

score 14 · Accepted Answer

HTML5数値入力を試すことができます：

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

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

score 11 · Accepted Answer

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)');

score 9 · Accepted Answer

function suppressNonNumericInput(event){
        if( !(event.keyCode == 8                                // backspace
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
            ) {
                event.preventDefault();     // Prevent character input
        }
    }

score 8 · Accepted Answer

次の 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()"/>

score 8 · Accepted Answer

私は、他のソリューションのようにユーザーがテキストを選択したり、貼り付けたりすることを妨げない、非常に優れたシンプルなソリューションにたどり着きました。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

score 7 · Accepted Answer

これは、私が以前に作成した簡単なソリューションです。あなたは私の記事でそれについてもっと読むことができます：

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

score 7 · Accepted Answer

みんなの役に立てると思います

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

score 6 · Accepted Answer

上記の@ 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 <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

score 6 · Accepted Answer

これは、jQuery UI Widget factory を使用する回答です。どの文字を許可するかを簡単にカスタマイズできます。

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

score 6 · Accepted Answer

タブを許可したいでしょう：

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // 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.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

score 6 · Accepted Answer

これは壊れにくいようです。

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

score 6 · Accepted Answer

2 つの異なるアプローチを次に示します。

小数点付きの数値を許可する
小数点なしの数値を許可する

アプローチ 1:

$("#approach1").on("keypress keyup blur",function (e) {
   $(this).val($(this).val().replace(/[^0-9\.]/g,''));
      if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
      }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric with decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach1">

アプローチ 2:

$("#approach2").on("keypress keyup blur",function (event) {    
   $(this).val($(this).val().replace(/[^\d].+/, ""));
    if ((event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Numeric without decimal point</h2><br/>
<span>Enter Amount</span>
<input type="text" name="amount" id="approach2">

score 5 · Accepted Answer

少しでもお役に立ちたくて、自分なりのバージョン、onlyNumbers関数を作ってみました...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

入力タグ "...input ... id="price" onkeydown="return onlyNumbers(event)"..." を追加するだけで完了です;)

score 5 · Accepted Answer

テンキーとタブキーも機能していることを確認する必要があります

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // 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.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

score 5 · Accepted Answer

これが、私が最近これを達成するために書いた理由です。これはすでに回答されていることは知っていますが、後で使用するために残します。

このメソッドは、キーボードとテンキーの両方、バックスペース、タブ、左矢印と右矢印 (通常の形式の操作) の 0-9 のみを許可します。

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});

score 5 · Accepted Answer

HTML5数値入力を試すことができます：

<input type="number" placeholder="enter the number" min="0" max="9">

この入力タグ要素は、min 属性が 0 に設定され、max 属性が 9 に設定されているため、0 から 9 の間の値のみを取るようになりました。

詳細については、http://www.w3schools.com/html/html_form_input_types.asp をご覧ください。

score 5 · Accepted Answer

入力値が数値であることを確認する簡単な方法は次のとおりです。

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

score 5 · Accepted Answer

私も答えたいと思います:)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

それだけです...ただの数字です。:) ほとんどの場合、「ぼかし」だけで機能しますが...

score 4 · Accepted Answer

キーストロークを使用して押された文字を検出することには、信じられないほどの互換性の問題があります...詳細については、quirksmodeを参照してください。

実際のユニバーサル文字を評価するために使用できる $(element).val() メソッドがあるため、keyup を使用してフィルターを作成することをお勧めします。

次に、次のような正規表現を使用して、非数字を除外できます。

replace(/[^0-9]/g,'');

これにより、シフトやペーストの問題などのすべての問題が処理されます。これは、キーアップが常に存在し、値が常に評価されるためです (javascript がオフになっていない限り)。

だから...これをJQueryに変えるには...これは私が書いている少し未完成のプラグインです。これはinputmaskと呼ばれ、完成するとより多くのマスクをサポートします。今のところ、数字マスクが機能しています。

ここに行きます...

/**
 * @author Tom Van Schoor
 * @company Tutuka Software
 */
(function($) {
  /**
   * @param {Object}
   * $$options options to override settings
   */
  jQuery.fn.inputmask = function($$options) {
    var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);

    return this.each(function() {
      // $this is an instance of the element you call the plug-in on
      var $this = $(this);

      /*
       * This plug-in does not depend on the metadata plug-in, but if this
       * plug-in detects the existence of the metadata plug-in it will
       * override options with the metadata provided by that plug-in. Look at
       * the metadata plug-in for more information.
       */
      // o will contain your defaults, overruled by $$options,
      // overruled by the meta-data
      var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;

      /*
       * if digits is in the array 'validators' provided by the options,
       * stack this event handler
       */
      if($.inArray('digits', o.validators) != -1) {
        $this.keyup(function(e) {
          $this.val(stripAlphaChars($this.val()));
        });
      }

      /*
       * There is no such things as public methods in jQuery plug-ins since
       * there is no console to perform commands from a client side point of
       * view. Typically only private methods will be fired by registered
       * events as on-click, on-drag, etc... Those registered events could be
       * seen as public methods.
       */

      // private method
      var stripAlphaChars = function(string) {
        var str = new String(string); 
        str = str.replace(/[^0-9]/g, ''); 
        return str;
      }

    });
  };

  // static public functions
  //jQuery.fn.inputmask.doSomething = function(attr) {

  //};

  // static public members
  //jQuery.fn.inputmask.someStaticPublicMember;

  // some default settings that can be overridden by either $$options or
  // metadata
  // If you need callback functions for the plug-in, this is where they get
  // set
  jQuery.fn.inputmask.defaults = {
    validators : []
  };
})(jQuery);

それを使用するには、次のようにします。

$('#someElementId').inputmask({
  validators: ['digits','someOtherNotYetImplementedValidator']
});

「someOtherNotYetImplementedValidator」は、追加の将来のマスク/バリデーターのためにこれを拡張する方法を示すためのものです。追加しても省略しても構いませんが、何も壊れません ;-)

コメントの余分な乱雑さについてお詫び申し上げます。私はここで職場の人たちのために作成したテンプレートを使用しています。

これが役に立てば幸いです、乾杯

score 3 · Accepted Answer

正規表現の方法は次のとおりです。

$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}

});

https://jsfiddle.net/astrapi69/qbk2vjty/1/

また、数字以外の文字を制限したい場合は、正規表現を他のものに変更できます。

score 3 · Accepted Answer

トップアンサーに問題がありました。数字キーパッドは含まれておらず、Shift + 数字を押しても特殊記号は表示されません..しかし、このソリューションはそれを処理しません。

このスレッドで見つけた最良のリンクは次のとおりです: http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes-to-Numeric-Values

私はstackoverflowが初めてなので、より良いソリューションをトップポストに編集できるかどうかわかりません。

score 3 · Accepted Answer

回答＃3についてもう少し詳しく説明するには、次のことを行います（注：キーボードまたはマウスによる貼り付け操作はまだサポートされていません）：

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );

score 3 · Accepted Answer

この jQuery コードはShift、CtrlまたはAltが押されている間に入力された文字を除外します。

$('#AmountText').keydown(function (e) {
    if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
        e.preventDefault();         // Prevent character input
    } else {
        var n = e.keyCode;
        if (!((n == 8)              // backspace
        || (n == 46)                // delete
        || (n >= 35 && n <= 40)     // arrow keys/home/end
        || (n >= 48 && n <= 57)     // numbers on keyboard
        || (n >= 96 && n <= 105))   // number on keypad
        ) {
            e.preventDefault();     // Prevent character input
        }
    }
});

score 2 · Accepted Answer

以下のコードを document.ready に追加します

    $('.class of text box').keyup(function () 
    {
    this.value = this.value.replace(/[^0-9]/g, '');
    });

score 2 · Accepted Answer

あなたが探しているものにはやり過ぎかもしれませんが、autoNumeric() と呼ばれる jQuery プラグインをお勧めします - それは素晴らしいです!

数値のみ、小数精度、最大/最小値などに制限できます。

http://www.decorplanit.com/plugin/

score 1 · Accepted Answer

この答えは完璧でしたが、 jQuery.Validation プラグインと組み合わせることで、より優れた、より強力なものにすることもできます。

number() メソッドを使用することで、次のようなものを開発できます。

$('.numberOnly').keydown(function (event) { 
  if ((!event.shiftKey && !event.ctrlKey && !event.altKey) && 
    ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) 
  // 0-9 or numpad 0-9, disallow shift, ctrl, and alt 
  { 
    // check textbox value now and tab over if necessary 
  } 
  else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37 
    && event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109 
    && event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190) 
  // not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190) 
  { 
    event.preventDefault(); 
  } 
  // else the key should be handled normally 
}); 
// _____________________________________________
jQuery.validator.setDefaults({ 
  debug: true, 
  success: "valid" 
}); 
// _____________________________________________
$(document).ready(function(){ 
  $('#myFormId').validate({ 
    rules: { 
      field: { 
        required: true, 
        number: true 
      } 
    } 
  }); 
});

そのため、「numberOnly」クラスの「#myFormId」フォームの Textbox は、10 進数、浮動小数点数、さらには負の数を含む数値のみを受け入れます。出来上がり:)

PS: 私の場合、何らかの理由で .validate() の代わりに jQuery.validator.addMethod() を使用しました:

jQuery.validator.addMethod("numberOnly", function (value, element) { 
var result = !isNaN(value); 
return this.optional(element) || result; 
}, jQuery.format("Please enter a valid number."));

(それは私の ASP.NET MVC 3 プロジェクト内で正常に動作します + 目立たない JavaScript 検証、hooooooooray!)

score 1 · Accepted Answer

/**
Makes the textbox to accept only numeric input
*/

(function($) {
    $.fn.allowOnlyNumeric = function() {

        /**
        The interval code is commented as every 250 ms onchange of the textbox gets fired.
        */

        //  var createDelegate = function(context, method) {
        //      return function() { method.apply(context, arguments); };
        //  };

        /**
        Checks whether the key is only numeric.
        */
        var isValid = function(key) {
            var validChars = "0123456789";
            var validChar = validChars.indexOf(key) != -1;
            return validChar;
        };

        /**
        Fires the key down event to prevent the control and alt keys
        */
        var keydown = function(evt) {
            if (evt.ctrlKey || evt.altKey) {
                evt.preventDefault();
            }
        };

        /**
        Fires the key press of the text box   
        */
        var keypress = function(evt) {
            var scanCode;
            //scanCode = evt.which;
            if (evt.charCode) { //For ff
                scanCode = evt.charCode;
            }
            else { //For ie
                scanCode = evt.keyCode;
            }

            if (scanCode && scanCode >= 0x20 /* space */) {
                var c = String.fromCharCode(scanCode);
                if (!isValid(c)) {
                    evt.preventDefault();
                }
            }
        };

        /**
        Fires the lost focus event of the textbox   
        */
        var onchange = function() {
            var result = [];
            var enteredText = $(this).val();
            for (var i = 0; i < enteredText.length; i++) {
                var ch = enteredText.substring(i, i + 1);
                if (isValid(ch)) {
                    result.push(ch);
                }
            }
            var resultString = result.join('');
            if (enteredText != resultString) {
                $(this).val(resultString);
            }

        };

        //var _filterInterval = 250;
        //var _intervalID = null;

        //var _intervalHandler = null;

        /**
        Dispose of the textbox to unbind the events.
        */
        this.dispose = function() {
            $(this).die('change', onchange);
            $(this).die('keypress', keypress);
            $(this).die('keydown', keydown);
            //window.clearInterval(_intervalHandler);
        };

        $(this).live('change', onchange);
        $(this).live('keypress', keypress);
        $(this).live('keydown', keydown);
        //_intervalHandler = createDelegate(this, onchange);
        //_intervalID = window.setInterval(_intervalHandler, _filterInterval);
    }
})(jQuery);

上記の $ プラグインは、AjaxControlToolkit フィルターテキストボックスの extender.js から作成されています。

ただし、AjaxControlToolkit から借用されていない 1 つの動作は、ユーザーが数値以外の値をコピーして貼り付けると、onchange イベントが発生し、テキストボックスが値を消費することです。コードを調べたところ、この onchange が 250 ミリ秒ごとに呼び出されたことがわかりました。これはパフォーマンスヒットであるため、その部分にコメントしました。

score 1 · Accepted Answer

私の場合、どの回答も機能しなかったため、受け入れられた回答を少し変更して、動的に追加された要素で機能するようにしました。

楽しみ：

var inputFilter = function (elem, cb) {
    /*
    *    /^-?\d*$/               restricts input to integer numbers
    *    /^\d*$/                 restricts input to unsigned integer numbers
    *    /^[0-9a-f]*$/i          restricts input to hexadecimal numbers
    *    /^-?\d*[.,]?\d*$/       restricts input to floating point numbers (allowing both . and , as decimal separator)
    *    /^-?\d*[.,]?\d{0,2}$/   restricts input to currency values (i.e. at most two decimal places)
    */
    bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
        if (cb(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);
        }
    });
};

使用法：

inputFilter('#onlyDigitsInput', function (val) {
    return /^\d*$/.test(val);
});

score 1 · Accepted Answer

スムーズな OneLiner がある場合:

<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

score 0 · Accepted Answer

I recommend to check event.metaKey as well. If that's set to true, the user might be doing something like cmd-A to select all the text in the field. You should allow that too.

score 0 · Accepted Answer

私はこのフォームで使用しています。、、、などhomeのキーを許可するのは正しいようですが、ユーザーが特別な文字を印刷できるという欠点があります。endshiftctrl

$("#busca_cep").keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
        if (event.keyCode == 13) {
            localiza_cep(this.value);
        }
    } else {
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

score 0 · Accepted Answer

小数点が既に使用されているかどうかを確認します:-

        // Stop: Multiple decimal points
        if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
            e.preventDefault();

score 0 · Accepted Answer

別のアプローチを以下に示します。これにより、貼り付けも処理されます。【英数字検証用】

//Input Validation
var existingLogDescription = "";

$('.logDescription').keydown(function (event) {
    existingLogDescription = this.value;

});


$('.logDescription').keyup(function () {
    if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
        alert("Log Description should contain alpha-numeric values only");
        this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
        this.value = existingLogDescription;
    }
});

score 0 · Accepted Answer

クラスを入力テキストに入れて、only_numbers という名前を付けます

ページに jquery コードを挿入する

$(document).ready(function() {
    $('.only_numbers').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

楽しんで：-）

score 0 · Accepted Answer

jQuery("#no_of").keypress(function(event){
    //Allow only backspace and delete
    if (event.keyCode != 46 && event.keyCode != 8) {
        if (!parseInt(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }
});

jQuery("#no_of").keyup(function(e){
    var temp_s= jQuery("#no_of").val();
    var multiply_val= temp_s*10;
    jQuery("#ex-r").html(multiply_val);
});

score 0 · Accepted Answer

$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}

score 0 · Accepted Answer

これは、整数値または浮動小数点値の数値入力を検証するために使用するものです (jQuery を使用した目立たないスタイル):

$('input[name="number"]').keyup(function(e) {
    var float = parseFloat($(this).attr('data-float'));

    /* 2 regexp for validating integer and float inputs *****
        > integer_regexp : allow numbers, but do not allow leading zeros
        > float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
    *************************************************************************/
    var integer_regexp = (/[^0-9]|^0+(?!$)/g);
    var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);

    var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
    if (regexp.test(this.value)) {
        this.value = this.value.replace(regexp, '');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">

score -1 · Accepted Answer

jquery 数値を使用します。以下の関数では、10 進数と数値を使用できます。
例: $("#inputId").numeric({ allow: "." });

score -2 · Accepted Answer

function Numbers(e)
{
    if($.browser.msie)
    {
        if(e.keyCode > 47 && e.keyCode < 58)
            return true;
        else
            return false;
    }
    else
    {
        if((e.charCode > 47 && e.charCode < 58) || (e.charCode == 0))
            return true;
        else
            return false;
    }
}

これがすべてのブラウザで機能することを願っています。

jquery - jQueryを使用してHTML入力ボックスで数値（0〜9）のみを許可するにはどうすればよいですか？

69 に答える 69

jQuery

純粋な JavaScript (jQuery なし)

HTML5

Related

Reference