web-dev-qa-db-ja.com

HTML入力タグに数値のみを許可する方法

特定の<input>フィールドが値として数だけを取るようにする必要があります。入力はフォームの一部ではありません。それ故にそれは提出されないので、提出の間の検証はオプションではありません。ユーザーが数字以外の文字を入力できないようにします。

これを達成するためのきちんとした方法はありますか？

htmlinputnumbersvalidating
113
Chiel ten Brinke

HTML 5

数値入力のみを制限するには、 HTML5入力タイプ番号 を使用できます。

<input type="number" name="someid" />

これはHTML 5苦情ブラウザでのみ動作します。あなたのHTMLドキュメントのDoctypeが以下であることを確認してください。

<!DOCTYPE html>

古いブラウザでの透過的なサポートについては https://github.com/jonstipe/number-polyfill も参照してください。

JavaScript

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

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

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

一般的な目的のために、以下のようにJS検証をすることができます：

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

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

小数を許可する場合は、「if条件」をこれに置き換えます。

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

出典： HTMLテキスト入力は数値入力のみ可能

JSFiddleデモ： http://jsfiddle.net/viralpatel/nSjy7/

243
Viral Patel

Html5のpattern属性を使うこともできます。

<input type="text" name="name" pattern="[0-9]" title="Title" />

入力検証チュートリアル

あなたのDOCTYPEがhtmlでなければ、私はあなたが何らかのjavascript/jqueryを使用する必要があると思いますが。

26
martincarlin87

このコードと入力フィールドを一緒に試してください

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

それはうまくいきます。

8
subindas pm

<input type="number" />を使うことができます。これにより、他の入力ボックスにのみ番号を入力できます。

例： http://jsfiddle.net/SPqY3/ /

入力type="number"タグは、新しいブラウザでのみサポートされています。

Firefoxの場合は、javascriptを使用して入力を検証できます。

http://jsfiddle.net/VmtF5/ /

更新2018-03-12： ブラウザサポートははるかに良くなりました。

  • Chrome 6+
  • Firefox 29以降
  • オペラ10.1+
  • サファリ5+
  • 端
  • （Internet Explorer 10以降）
5
starbeamrainbowlabs
function AllowOnlyNumbers(e) {

    e = (e) ? e : window.event;
    var key = null;
    var charsKeys = [
        97, // a  Ctrl + a Select All
        65, // A Ctrl + A Select All
        99, // c Ctrl + c Copy
        67, // C Ctrl + C Copy
        118, // v Ctrl + v paste
        86, // V Ctrl + V paste
        115, // s Ctrl + s save
        83, // S Ctrl + S save
        112, // p Ctrl + p print
        80 // P Ctrl + P print
    ];

    var specialKeys = [
    8, // backspace
    9, // tab
    27, // escape
    13, // enter
    35, // Home & shiftKey +  #
    36, // End & shiftKey + $
    37, // left arrow &  shiftKey + %
    39, //right arrow & '
    46, // delete & .
    45 //Ins &  -
    ];

    key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    //console.log("e.charCode: " + e.charCode + ", " + "e.which: " + e.which + ", " + "e.keyCode: " + e.keyCode);
    //console.log(String.fromCharCode(key));

    // check if pressed key is not number 
    if (key && key < 48 || key > 57) {

        //Allow: Ctrl + char for action save, print, copy, ...etc
        if ((e.ctrlKey && charsKeys.indexOf(key) != -1) ||
            //Fix Issue: f1 : f12 Or Ctrl + f1 : f12, in Firefox browser
            (navigator.userAgent.indexOf("Firefox") != -1 && ((e.ctrlKey && e.keyCode && e.keyCode > 0 && key >= 112 && key <= 123) || (e.keyCode && e.keyCode > 0 && key && key >= 112 && key <= 123)))) {
            return true
        }
            // Allow: Special Keys
        else if (specialKeys.indexOf(key) != -1) {
            //Fix Issue: right arrow & Delete & ins in FireFox
            if ((key == 39 || key == 45 || key == 46)) {
                return (navigator.userAgent.indexOf("Firefox") != -1 && e.keyCode != undefined && e.keyCode > 0);
            }
                //DisAllow : "#" & "$" & "%"
                //add e.altKey to prevent AltGr chars
            else if ((e.shiftKey || e.altKey) && (key == 35 || key == 36 || key == 37)) {
                return false;
            }
            else {
                return true;
            }
        }
        else {
            return false;
        }
    }
    else {
        return true;
       }
    }
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
3
Sameh Saeed

私はこれと少し戦った。あちこちで多くの解決策は複雑に見えました。このソリューションはHTMLと共に jQuery/javascript を使用します。

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

私の場合は、最小値1の少量を追跡していたので、入力タグではmin = "1"、isNaN（）チェックではabc = 1です。正数のみの数値の場合は、これらの値を0に変更し、負数を許可するために入力タグからmin = "1"を削除することもできます。

また、これは複数のボックスに対して機能します（そして、idによってそれらを個別に実行するよりもロード時間を節約することができます）。必要に応じて "validateNumber"クラスを追加するだけです。

説明

parseInt（）は基本的に、整数値ではなくNaNを返すことを除いて、必要なことを行います。単純なif（）を使用すると、すべての場合にNaNが返される「fallback」値を設定できます:-)。また、W3は ここ をチェックする前に、グローバルバージョンのNaNがキャストとタイプすることを示しています。サーバ/バックエンドに送信された値は、そこでも検証されるべきです。

3
Isaiah
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyupはキーが離されると起動します。

isNaN(parseFloat(value))?は、入力値が数値ではないかどうかを調べます。

数値ではない場合、値は1000に設定されます。:数値である場合、値は値に設定されます。

note： 何らかの理由でtype="number"でしか動作しない

それをさらに終了させるために、境界を設定することもできます。

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

楽しい！

3
user40521

迅速で簡単なコード

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

これは数字とバックスペースのみの使用を許可します。

小数部も必要な場合は、このコードを使用してください。

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
2
abhijithvijayan
<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

そしてjsで：

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

あるいは、それを複雑で便利な方法で書くことができます。

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

注 ：クロスブラウザと正規表現の正規表現。

2
Fredrick Gauss

hTML5が使えるなら<input type="number" />もできますし、そうでなければJavaScriptからそれをやる必要があるでしょう。

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

P.Sはコードをテストしませんでしたが、タイプミスをチェックしない場合は多かれ少なかれ正しいはずです。

2
czioutas

入力値を必要なパターンに置き換えるために正規表現を使用しました。

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">
2
Shaktish

あなたの入力タグの内側に追加してください：onkeyup = "value = value.replace（/ [^\d]/g、 ''）"

1
Naveen Kumar

以下を追加するために投稿されたいくつかの回答を更新しました。

  • メソッドを拡張メソッドとして追加
  • 1点のみ入力を許可

  • 小数点以下の桁数を指定します。

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
1
Plexis Plexis

整数値でない場合は0 

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
1
websky

JavaScript言語を使用してあなたのWebページのテキスト入力要素の値のクロスブラウザフィルタの私のプロジェクトを見てください： 入力キーフィルタ 。値を整数、浮動小数点数としてフィルタリングしたり、電話番号フィルタなどのカスタムフィルタを作成したりできます。整数入力のコード例を参照してください。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
        <!-- For compatibility of IE browser with audio element in the beep() function.
        https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        
        <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">           
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
        
</head>
<body>
        <h1>Integer field</h1>
<input id="Integer">
<script>
        CreateIntFilter("Integer", function(event){//onChange event
                        inputKeyFilter.RemoveMyTooltip();
                        var elementNewInteger = document.getElementById("NewInteger");
                        var integer = parseInt(this.value);
                        if(inputKeyFilter.isNaN(integer, this)){
                                elementNewInteger.innerHTML = "";
                                return;
                        }
                        //elementNewInteger.innerText = integer;//Uncompatible with FireFox
                        elementNewInteger.innerHTML = integer;
                }
                
                //onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
                , function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
        );
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>

私のページも見てください 入力キーフィルタの例の「整数フィールド：」

1
Andrej

受け入れられた答え：

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

それはいいのですが完璧ではありません。それは私のためにうまくいきます、しかし私はifステートメントが単純化されることができるという警告を得ます。

それでは、このようになります。

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

元の投稿にコメントしますが、私の評判はそれを行うには低すぎます（このアカウントを作成したばかり）。

1
Chris H.

<input>タグを属性type = 'number'とともに使用できます。

例えば<input type='number' />を使えます

この入力フィールドは数値のみを許可します。このフィールドで受け入れるべき最小値と最大値を指定することもできます。

1
Geeth Chadalawada

<input type="number"...>を使ってはどうですか？

http://www.w3schools.com/tags/tag_input.asp

また、ここに 検証のためにJavascriptを使った例がいくつかあります です。

更新：より良い質問へのリンク（感謝alexblum）。

1
dan1111

私は郵便番号のためにこれを使います、速くて簡単。

<input type="text" id="Zip_code" name="Zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
0
Justin Buser

一般的な目的のために、以下のようにJS検証をすることができます：

それはテンキーと通常の数字キーのために働くでしょう

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
0
YasirPoongadan

http://www.texotela.co.uk/code/jquery/numeric/数字の入力 これに言及してくれたことと、もちろんTexoTelaにしてくれたLeoVÀの功績。テストページ付き。

0
Clark Superman

このコードを使用するとき、Mozilla Firefoxでは "BackSpace Button"を使用できません。Chrome47ではバックスペースしか使用できません。&& event.charCode <58; "pattern =" [0-9] {5} "必須>

0
Wendell Alvarez