HTMLテキスト入力（<input type=text />）を設定して数値キーストローク（プラス '。'）のみを許可する簡単な方法はありますか？

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

JavaScript

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

<input>次のsetInputFilter関数を使用して、テキストの入力値をフィルタリングできます（コピー+貼り付け、ドラッグ+ドロップ、キーボードショートカット、コンテキストメニューの操作、入力できないキー、キャレットの位置、さまざまなキーボードレイアウト、およびIE 9以降のすべてのブラウザーをサポート） ：

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, 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 = "";
      }
    });
  });
}

これで、setInputFilter関数を使用して入力フィルターをインストールできます。

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

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

TypeScript

これはTypeScriptバージョンです。

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

これのjQueryバージョンもあります。この回答を参照してください。

HTML 5

HTML 5には<input type="number">（仕様を参照）のネイティブソリューションがありますが、ブラウザのサポートはさまざまです。

• ほとんどのブラウザは、フォームを送信するときにのみ入力を検証し、入力時には検証しません。
• ほとんどのモバイルブラウザはstep、minおよびmax属性をサポートしていません。
• クロム（バージョン71.0.3578.98）はまだ、ユーザーが文字を入力することを可能にeし、Eフィールドに。こちらの質問もご覧ください。
• Firefox（バージョン64.0）およびEdge（EdgeHTMLバージョン17.17134）では、ユーザーはフィールドに任意のテキストを入力できます。

w3schools.comでお試しください。

このDOMを使用

<input type='text' onkeypress='validate(event)' />

そしてこのスクリプト

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

私はこれに対する良い答えを長く懸命に探しました、そして私達は必死に必要とします<input type="number"、しかしそれを除けば、これら2つは私が思いつくことができる最も簡潔な方法です：

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

承認されない文字が一瞬表示されてから消去されるのを嫌う場合、以下の方法が私の解決策です。多数の追加条件に注意してください。これは、あらゆる種類のナビゲーションとホットキーを無効にするのを避けるためです。これをコンパクトにする方法を知っている人がいたら、私たちに知らせてください！

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

以下は、小数点以下1桁を許容する単純なものですが、それ以上はありません。

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

そして、もう1つの例は、私にとってはうまくいきます。

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

キープレスイベントにも添付

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

そしてHTML：

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

ここにjsFiddleの例があります

HTML5には<input type=number>があります。現在、Operaのみがネイティブでサポートしていますが、JavaScript実装を含むプロジェクトがあります。

ここでのほとんどの回答には、キーイベントを使用する弱点があります。

回答の多くは、キーボードマクロ、コピー+貼り付け、および不要な動作を使用してテキストを選択する機能を制限します。他の回答は、マシンガンでハエを殺している特定のjQueryプラグインに依存しているようです。

このシンプルなソリューションは、入力メカニズム（キーストローク、コピー+貼り付け、右クリックコピー+貼り付け、スピーチからテキストなど）に関係なく、クロスプラットフォームに最適です。すべてのテキスト選択キーボードマクロは引き続き機能し、スクリプトで数値以外の値を設定する機能も制限されます。

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

ここで述べた2つの回答の組み合わせを使用することを選択しました

<input type="number" />

そして

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

HTML5は正規表現をサポートしているため、これを使用できます。

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

警告：一部のブラウザはまだこれをサポートしていません。

JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

さらに、カンマ、ピリオド、マイナス（、.-）を追加できます

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

とても簡単....

// JavaScript関数内（HTMLまたはPHPを使用できます）。

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

フォーム入力：

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

入力最大で。（上記は12桁の数字を許可します）

2つのソリューション：

フォームバリデーターを使用します（たとえば、jQuery検証プラグインを使用）

正規表現を使用して、入力フィールドのonblur（つまり、ユーザーがフィールドを離れる）イベント中にチェックを実行します。

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

より安全なアプローチは、キープレスをハイジャックしてkeyCodeをフィルタリングする代わりに、入力の値をチェックすることです。

このようにして、ユーザーはキーボードの矢印、修飾キー、バックスペース、削除、非標準のキーボードの使用、マウスを使用した貼り付け、ドラッグアンドドロップテキストの使用、アクセシビリティ入力の使用まで自由に行えます。

以下のスクリプトは正と負の数を許可します

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

編集：私はそれが今時代遅れであると思うので、私は私の古い答えを削除しました。

これにはパターンを使用できます：

<input id="numbers" pattern="[0-9.]+" type="number">

ここでは、完全なモバイルWebサイトインターフェイスのヒントを確認できます。

以下の解決策を見つけてください。このユーザーにのみ入力することができることができnumeric、ユーザのことができるようにすることができない、値copy、paste、dragとdrop入力します。

使用できる文字

0,1,2,3,4,5,6,7,8,9

許可されていないキャラクターとイベントを介したキャラクター

• アルファベット値
• 特殊文字
• コピーする
• ペースト
• 引っ張る
• 落とす

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

うまくいかない場合はお知らせください。

デバイス（携帯電話など）にアルファベットまたは数字を提案する場合は、を使用できます<input type="number">。

入力フィールドに数字のみを追加でき、文字は追加できないもう1つの例

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

event.keyCodeやevent.whichではなく、jQueryとreplace（）を使用した短くて甘い実装：

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

入力した文字が一瞬表示され、CTRL / CMD + Aが少し奇妙に振舞うという小さな副作用のみ。

input type="number" HTML5属性です。

他の場合、これはあなたを助けるでしょう：

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

JavaScriptコード：

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTMLコード：

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

バックスペースのキーコードが8であり、正規表現がそれを許可しないため、完全に機能します。これは、バグを回避する簡単な方法です:)

この問題を解決する簡単な方法は、テキストボックスに入力された文字を正規表現で検証するjQuery関数を実装することです。次に例を示します。

あなたのhtmlコード：

<input class="integerInput" type="text">

そしてjQueryを使用したjs関数

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

jQueryを使用する他のバリアント

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

type = "number"を使用するだけで、この属性はほとんどのブラウザーでサポートされます

<input type="number" maxlength="3" ng-bind="first">

次のように、入力値（デフォルトでは文字列として扱われます）を数値として強制された値と比較することもできます。

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

ただし、キーアップなどのイベントにバインドする必要があります。

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

私はいくつかの素晴らしい答えを見ましたが、私はそれらをできるだけ小さく、できるだけ単純にしたいので、多分誰かがそれから利益を得るでしょう。私はこのようなJavaScript Number()とisNaN機能を使用します：

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

お役に立てれば。

このDOMを使用：

<input type = "text" onkeydown = "validate(event)"/>

そして、このスクリプト：

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...または、このスクリプトは、indexOfなしで、2つforのを使用しています...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

onkeypress属性の前にonkeydown属性がチェックされるため、onkeypress属性の代わりにonkeydown属性を使用しました。問題はGoogle Chromeブラウザーにあります。

「onkeypress」属性を使用すると、Google Chromeの「preventDefault」を使用してTABを制御できなくなりますが、「onkeydown」属性を使用すると、TABを制御可能になります。

TABのASCIIコード=> 9

最初のスクリプトは2番目のスクリプトよりもコードが少ないですが、ASCII文字の配列にはすべてのキーが必要です。

2番目のスクリプトは最初のスクリプトよりもはるかに大きいですが、配列はすべてのキーを必要としません。配列の各位置の最初の桁は、各位置が読み取られる回数です。読み取りごとに、1が次の読み取りに増分されます。例：




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




数値キーの場合は10（0-9）のみですが、100万の場合、これらのすべてのキーを持つ配列を作成しても意味がありません。

ASCIIコード：

• 8 ==>（バックスペース）;
• 46 =>（削除）;
• 37 =>（左矢印）;
• 39 =>（右矢印）;
• 48-57 =>（数値）;
• 36 =>（ホーム）;
• 35 =>（終了）;

これは改善された機能です：

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

最善の方法（すべてのタイプの数値を許可-実数負、実数正、整数負、整数正）は次のとおりです。

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

これはgeowa4のソリューションの拡張バージョンです。サポートminとmax属性。数値が範囲外の場合、以前の値が表示されます。

ここでテストできます。

使用法： <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

入力が動的である場合、これを使用します。

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});