web-dev-qa-db-ja.com

jQueryの:テキストボックスの "数"のみの入力を制限するための最良の方法は何ですか? (小数点を許可する)

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

小数点が許されるものを探しています。

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

Praveen Jeganathanからの更新

これ以上のプラグインではなく、jQueryはv1.7で追加された独自のjQuery.isNumeric()を実装しました。参照してください: https://stackoverflow.com/a/20186188/66767

225
wenbert

更新

これには新しくて非常に簡単な解決策があります。

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

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

jquery.numericプラグイン

私は jquery.numeric プラグインを使って多くのフォームをうまく実装しました。

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

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

ただし、Ctrl + A、コピー+貼り付け(コンテキストメニューを使用)、およびドラッグ+ドロップは期待どおりに機能しません)になります。

HTML 5

HTML 5規格のより広いサポートにより、数値のみの入力を制限するためにpattern要素にnumber属性とinput型を使用できます。一部のブラウザ(特にGoogle Chrome)では、数字以外のコンテンツの貼り付けも制限するように機能します。 numberやその他の新しい入力型に関するより詳しい情報は here をご覧ください。

192
TheVillageIdiot

(検証とは対照的に)入力を制限したい場合は、重要なイベントを扱うことができます。このようなもの:

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

そして:

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

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

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

285
Keith Bentrup

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

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

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

100
James Nelli

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

これ以上のプラグインではなく、 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);
   }
});
47
Praveen

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

もちろん、これは純粋な数値入力(プラスバックスペース、削除、前進/後退キー)専用ですが、ポイントやマイナス文字を含めるように簡単に変更できます。

33
Mike Gibbs

検証プラグイン をその number() メソッドと共に使用できます。

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

このコードを試すだけで、数字入力制限のための長いコードは必要ありません。

有効な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 />

UPDATE

上記の答えは最も一般的なユースケース - 数値としての入力の検証 - に対するものです。

しかし、以下は特別な使用例のためのコードスニペットです。

  • 負数を許可する
  • 削除する前に無効なキーストロークを表示しています。
$(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 />
17
vinayakj

下記は私が文字通りキーストロークをブロックするために使用しているものです。これは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)">
14
kaleazy

ちょっと改善した この提案に対して検証プラグインnumber()数字 、および range )メソッドと一緒に使えます。例えば、以下は0から50までの正の整数を得ることを保証します。

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

あなたはアルファベットが魔法のように見えたり消えたりするのを見下ろしてはいけません。これはマウスペーストでも機能します。

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

私は最初に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ソリューションを求めているのを知っています、しかしうまくいけば誰かがとにかくこれが役に立つと思うでしょう。

8
Håvard Geithus
   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();
6
David Freire

投稿をありがとう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();
  }
});
6
lekshmi

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://jsfiddle.net/p1ue8qxj/

5
Mladen Adamovic

この関数は同じことをします、上の考えのいくつかを使います。

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

/ *これは私のクロスブラウザ版の 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();
            }
        }

  });
4
roger

私はこれがこの問題を解決するための良い方法であると思います、そしてそれは非常に簡単です:

$(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. homeend、およびarrowキーを許可します。
  3. 任意のインデックスでdeletebackspaceを使用できるようにします。
  4. (入力が正規表現と一致する限り)任意のインデックスで編集できます。
  5. Ctrl + VとShift + Insertを有効な入力として許可します(右クリック+貼り付けと同じ)。
  6. keyupイベントが使用されていないため、テキスト値は点滅しません。
  7. 無効な入力の後に選択を元に戻します。

シナリオが失敗しました

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

プラグイン

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

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

ParseFloat()で内容を実行するだけです。無効な入力ではNaNを返します。

3

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

私はいくつかのCSSの微調整で、IE6環境で使用しました、そしてそれは合理的な成功でした。

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

autoNumeric Webサイトからのの適用:

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

これは、テキストフィールドの整数パーセント検証のために(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;
    }
});

このコード:

  • メインテンキーとテンキーの使用を許可します。
  • Shift-numeric文字(#、$、%など)を除外することを検証します。
  • NaN値を0に置き換えます
  • 100より大きい100の値に置き換えます

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

2

HTML 5を使用している場合、検証を実行するためにそれほど長い時間を費やす必要はありません。ただ使う -

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

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

2
Jay Blanchard

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

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

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

2
jrharshath

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

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)'
2
Alex Homm

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

私の要件に従って、 "keyup"を "keydown"に変更しました。

2
Mithil

入力でキャレット位置を維持する他の方法は次のとおりです。

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

プランカー: デモ作業

2
Carlos Toledo

これは非常に単純ですが、JavaScriptの組み込み関数「isNaN」がすでにあります。

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});
1
Jyothu
    $(".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を追加しなければなりませんでした。

1
Reedyseth

私はその機能を使用し、それはうまく機能します

$(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;
            }
        });
    }); 
1
kamal.shalabe

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

1
tksilicon

jquery.numeric プラグインは私にとってもうまくいきます。

私が嫌いなのは直感的なことだけです。キープレスはユーザーに何のフィードバックもなしに「許可されない」ようになります。

ブロックされた入力についての簡単なフィードバックを可能にするために、私 はプラグイン に2番目のコールバックを追加しました。

$('#someInput').numeric(
    null, // default config
    null, // no validation onblur callback
    function(){
        // for every blocked keypress:
        $(this).effect("pulsate", { times:2 }, 100);
    }
);

ほんの一例です(jQuery UIを使用)。もちろん。どんな単純な視覚的なフィードバックも助けになるでしょう。

1
Tabbernaut

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

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

今すぐあなたのフォームフィールド内で許可されるのは数字だけです。

1
David

キープレスイベントの使用

  1. 配列メソッド
var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
        if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
            e.preventDefault();
    });
  1. 直接法
$(".numbersOnly").keypress(function (e) {
        if (e.which < 48 || 57 < e.which)
            e.preventDefault();
    });
1
samurai

もっと良いプラグインが見つかりました。あなたにもっとコントロールを与えます。数値が必要な場所に DOB フィールドがあるが、 "/"または " - "の文字も使用できるとします。

それは素晴らしい作品です!

http://itgroup.com.ph/alphanumeric/ でチェックしてください。

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
1
Kaustubh

パターンを追加することで、テキスト入力にHTML 5検証を使用できます。正規表現やkeyCodeを使って手動で検証する必要はありません。

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

入力[type = number]を使った解法については、ここで私の完全な答え をご覧ください

0
jBelanger

負の数も許可する

次のコードも負の数を受け入れます

HTML

<input type="text" name="myText" />

JS

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {

    if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
}).on('blur', function(){
        if(this.value == '-')
            this.value = '';
});

私はこのコードを持っていますが、これは私にとって非常にうまく機能します。

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

このコードは、テキストボックス内のアルファベットを制限するためのもので、keypressイベントで検証するためのooly番号を入力する必要があります。

HTMLタグ:

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

function onlyNumbers(キー){

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