HTML入力タグで数値のみを受け入れるようにする方法は？

143

特定の<input>フィールドが数値としてのみ値をとることを確認する必要があります。入力はフォームの一部ではありません。したがって、送信されないため、送信中に検証することはできません。ユーザーが数字以外の文字を入力できないようにしたい。

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

html  input  numbers  validating 
— チールテンブリンケ
ソース
— alexblum
2
十分な情報があるこの[リンク] [1]を見てください。[1]：stackoverflow.com/questions/469357/...
— Maheshkumar
また、便利になることがあり、この1：stackoverflow.com/questions/995183/...
— Chiel 10 Brinke
— emkey08

回答:

282

HTML 5

あなたは使用することができますHTML5の入力タイプ番号を数字のみのエントリを制限します：

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

これは、HTML5クレームブラウザーでのみ機能します。HTMLドキュメントのdoctypeが次のとおりであることを確認してください。

<!DOCTYPE html>

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

JavaScript

更新：このための新しい非常にシンプルなソリューションがあります。

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

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

一般的な目的で、以下のようにJS検証を行うことができます。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.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/

— ウイルスパテル
ソース
6
はい、これは私にとってFirefoxとChromeの両方で機能します。こんな単純なことをするためにjsが必要なのは奇妙です。
— Chiel ten Brinke
7
chrome 30では機能しません。フィドルの「数値」入力に文字を入力するのにまったく問題はありません。うーん...
— ベン
2
8.9のようなfloat値を入力したい場合はどうなりますか？
— syed shah 2013
6
より堅牢なソリューションの場合は、コピーアンドペーストでこの例に文字を追加できることも考慮してください。
— Neil、
3
おっとっと！！：最初の行に変更しなければならないvar charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

html5でpattern属性を使用することもできます。

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

入力検証チュートリアル

ただし、Doctypeがそうでないhtml場合は、javascript / jqueryを使用する必要があると思います。

— マーティンカーリン87
ソース
3
非数値が入力されると、firefoxは入力ボックスに赤い枠を付けますが、firefoxとchromeの両方で、入力ボックスに非数値文字を入力することができます。
— チール・テン・ブリンク
ページで使用しているdoctypeは何ですか？
— martincarlin87
たぶん、お使いのブラウザのバージョンではサポートされていませんか？100％確実ではありませんが、正直に言うと、妥当性を検証するためにいくつかのjsを使用します。現時点では、純粋にhtml5に依存しません
— martincarlin87
7
プロパティでは、数値を入力できますが、フォームは送信できません。
— My1 2016年
1
検証のみを送信してください！
— Eric Hodonsky 2017年
16

すばやく簡単なコード

<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)))" />
— abhijithvijayan
ソース
13

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

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

正常に動作します。

— スビンダス午後
ソース
その後、バックスペースを削除する方法？
— 6by3
7

を使用できます<input type="number" />。これにより、入力ボックスに入力できるのは数字のみになります。

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

input type="number"タグは新しいブラウザでのみサポートされていることに注意してください。

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

http://jsfiddle.net/VmtF5/

2018-03-12の更新：ブラウザーのサポートが大幅に改善され、次のサポートが追加されました。

  • Chrome 6以降
  • Firefox 29以降
  • Opera 10.1以降
  • Safari 5以降
  • 縁
  • （Internet Explorer 10以降）
— starbeamrainbowlabs
ソース
1
Chromeでは非常にうまく機能するようですが、Firefoxでは機能しません。
— Chiel ten Brinke、
ああ。これは、firefoxが入力type = numberをサポートしていないためです。あるいは、ユーザーがテキストを入力するときに、JavaScriptを使用して入力を検証することもできます。回答を更新しました。
— starbeamrainbowlabs 2012
上のJScript jsfiddle.net/VmtF5は、また、機能しません。文字の先頭に1桁ある場合でも、検証は失敗します。jsfiddleで試してみてください
— Akshay
@aarn動作します（i.imgur.com/AWdmEov.pngを参照）、どのブラウザーを使用していますか？
— starbeamrainbowlabs 14
@starbeamrainbowlabs私はFirefoxを使っています。また、6abcと入力すると、エラーは表示されません
— Akshay
5 
<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));
}

または、複雑なbu便利な方法でそれを書くことができます：

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

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

— フレデリック・ガウス
ソース
.5や.3のような入力を行う機能をどのように追加しますか？
— user3591637 2014年
次に、現在の入力と押されたキーの値をチェックして実行できる最初と2番目の文字（0.43または.43）を考慮する必要があります。これは1行のコードでは醜いので、関数を使用することをお勧めします。整数または浮動小数点をテストするには、ここを確認してください。
— Fredrick Gauss
1
誤って入力した数字は削除できません
— Chris Sim
5

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

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">
スニペットを展開

— シャクティッシュ
ソース
1
だから私は正規表現が大好きです。おかげで、本当に、あなたは本当に私の日を救いました
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup キーが離されるとトリガーされます。

isNaN(parseFloat(value))? 入力値が数値でないかどうかを確認します。

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

注：なんらかの理由で、type="number"

さらに存在感を高めるために、境界を持つこともできます。

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

楽しい！

— user40521
ソース
4

私はこれと少し戦った。ここや他の多くのソリューションは複雑に見えました。このソリューションでは、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が返されるすべてのケースで優先する「フォールバック」値を設定できます:-)。また、W3はここで、NaNのグローバルバージョンがチェックの前に型キャストを行い、追加の証明を提供すると述べています（Number.isNaN（）はそれを行いません）。サーバー/バックエンドに送信された値は、そこでも検証される必要があります！

— イザヤ書
ソース
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
スニペットを展開

JSFiddle：https ://jsfiddle.net/ug8pvysc/

— サメ・サイード
ソース
1
テキストを含む値を貼り付けると許可されます
— Chris Sim
1
特殊文字も使用できます。例：á、ã、ê、ó、èなど
— AlmostPitt 2017年
3

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

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

— czioutas
ソース
2

整数でない場合は0を設定

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

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— ウェブスカイ
ソース
2

受け入れられた答え：

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

元の投稿にコメントしますが、評判が低すぎてコメントできません（このアカウントを作成したばかりです）。

— クリスH.
ソース
2

<input>タグは属性type = 'number'で使用できます。

例えばあなたは使うことができます <input type='number' />

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

— ジース・チャダラワダ
ソース
2

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 anhr@mail.ru">
	<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>
スニペットを展開

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

— アンドレイジ
ソース
2

一般的な目的で、以下のように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)"/>
— YasirPoongadan
ソース
2

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

  • メソッドを拡張メソッドとして追加する
  • 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

私はこれを郵便番号に使用します。すばやく簡単です。

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— ジャスティン・バスター
ソース
1

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

— ウェンデルアルバレス
ソース
0

複数の桁（1桁だけではない）を受け入れるには、REGEX条件に「+」を追加することをお勧めします。

<input type="text" name="your_field" pattern="[0-9]+">

— ダシュコ・レオニード
ソース
0

1つの方法は、許可された文字コードの配列をArray.includes用意し、関数を使用して、入力された文字が許可されているかどうかを確認することです。

例：

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
ソース
0

簡単ですか？

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
スニペットを展開

— ノルマジャン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.