235

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

小数点が使えるものを探しています。

多くの例を目にします。しかし、どちらを使用するかはまだ決めていません。

Praveen Jeganathan からの更新

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

4

40 に答える 40

291

(検証ではなく)入力を制限する場合は、主要なイベントを操作できます。このようなもの:

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

と:

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

これにより、検証フェーズの後半ではなく、英字などを入力できないことがすぐにわかります。

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

于 2009-05-21T07:53:10.013 に答える
102

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

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

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

于 2012-08-09T18:53:41.913 に答える
54

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();
  }
});
于 2010-02-09T21:59:28.990 に答える
48

プラグインはもう必要ありません。jQueryは v1.7 で追加された独自の jQuery.isNumeric() を実装しています

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);
   }
});
于 2013-11-25T06:38:08.177 に答える
35

上記の 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]/));
}

もちろん、これは純粋な数値入力 (およびバックスペース、削除、進む/戻るキー) のみですが、ポイントやマイナス文字を含むように簡単に変更できます。

于 2013-09-10T12:20:34.013 に答える
25

number()メソッド でValidation プラグインを使用できます。

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});
于 2009-05-21T07:14:38.827 に答える
14

以下は、文字通りキーストロークをブロックするために使用するものです。これは、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)">
于 2012-10-26T10:15:15.817 に答える
11

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

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});
于 2012-08-01T16:47:12.600 に答える
9

キーを押したときにアルファベットが魔法のように現れたり消えたりすることはありません。これはマウスペーストでも機能します。

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});
于 2013-05-15T22:51:45.733 に答える
8

最初に 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ソリューションを求めていることは知っていますが、とにかく誰かがこれが役立つことを願っています.

于 2014-05-05T08:54:05.560 に答える
7

デイブ・アーロン・スミスの投稿をありがとう

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

$(".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();
  }
});
于 2011-08-05T12:09:06.167 に答える
6
   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();
于 2014-02-25T01:46:11.503 に答える
4

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

$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); 
});
  • 視覚的なフィードバックを表示する (消える前に間違った文字が表示される)
  • 小数を許可する
  • 複数の「。」をキャッチします。
  • 左右のデルなどに問題はありません。
于 2012-01-17T20:46:38.987 に答える
4

/* これは、 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();
            }
        }

  });
于 2012-06-18T12:28:53.580 に答える
4

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

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

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

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

この質問で提供されたjqueryソリューションは3桁区切りをサポートしていないため、jqueryソリューションよりも優れていると思います。html5が使えるなら

JSFiddle: https://jsfiddle.net/p1ue8qxj/

于 2015-10-06T15:25:26.290 に答える
3

parseFloat()を介してコンテンツを実行するだけです。NaN無効な入力で返されます。

于 2009-05-21T07:58:07.663 に答える
3

decorplanit.com から autoNumericを使用できます。数値だけでなく、通貨、丸めなどもサポートしています。

私は IE6 環境で使用しましたが、css の調整はほとんどありませんでしたが、妥当な成功でした。

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

autoNumeric Web サイトからの適合:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
于 2012-02-07T23:34:06.533 に答える
3

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

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

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

于 2014-05-23T16:55:10.697 に答える
2

ここで素晴らしい解決策を見つけましたhttp://ajax911.com/numbers-numeric-field-jquery/

要件に応じて「keyup」を「keydown」に変更しました

于 2012-10-05T16:03:19.440 に答える
2

これは、テキストフィールドの整数パーセント検証のために私が行ったばかりのスニペットです (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 個の値に置き換えます

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

于 2010-11-08T15:26:54.727 に答える
2

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

内容が「数値」かどうかは正規表現で確認できます。

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

于 2009-05-21T07:17:30.600 に答える
2

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

$(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. 数字を貼り付けたいときに使えます

プランカー:デモ作業中

于 2016-04-01T18:04:45.280 に答える
2

データベースの使用については、次の検索コードを確認してください。

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)'
于 2010-03-06T15:23:02.517 に答える
1

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

それはうまくいきます!

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

于 2009-10-10T03:38:26.200 に答える
1

James Nelli の回答を使用し、onpaste="return false;" を追加しました。(Håvard Geithus) は、整数のみが入力に入力されるようにします。貼り付けようとしても、それは許可されません。

于 2014-10-13T11:53:56.407 に答える
1

私はその機能を使用し、正常に動作します

$(document).ready(function () {
        $("#txt_Price").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            //if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
                //display error message
                $("#errmsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
        });
    }); 
于 2014-02-19T13:57:58.147 に答える
1
    $(".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を追加する必要がありましたが、これが最善の方法だとは思いません;)

于 2010-07-12T05:53:41.980 に答える
1

これは非常に簡単で、JavaScript 組み込み関数「isNaN」が既に存在します。

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});
于 2012-12-20T06:14:24.250 に答える
1

フォーム フィールドと html 要素にマスクを作成するように設計されたJquery Mask Pluginと呼ばれる優れた jquery プラグイン がありますが、それを使用して、フィールド内に入力できるデータの種類を単純に定義することもできます。

$('.numeric-input').mask('0#');

これで、フォーム フィールド内では数字のみが許可されます。

于 2016-03-20T14:39:00.373 に答える
1

私はこれを使用しましたが、良い結果が得られました..

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
于 2012-07-27T08:22:45.637 に答える
0

このコードは、テキストボックスのアルファベットを制限するために属し、キープレスイベントで検証番号を入力する必要があります.お役に立てば幸いです

HTML タグ:

<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />

関数のみNumbers(key) {

        var keycode = (key.which) ? key.which : key.keyCode

        if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {

            return true;
        }
        else {
            return false;
        }
    }
于 2014-01-27T13:27:55.940 に答える
0

I have this piece of code that does the job very well for me.

 var prevVal = '';
$(".numericValue").on("input", function (evt) {
    var self = $(this);
    if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
        prevVal = self.val()
    } else {
        self.val(prevVal);
    }
    if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
        evt.preventDefault();
    }
});
于 2017-03-24T03:44:04.250 に答える
-4

スクリプトの最後に次を追加してください。

if(this.value.length == 1 && this.value == 0)
 this.value = "";
于 2011-04-14T14:28:40.327 に答える