HTMLの入力タグは数値だけを受け入れる方法は?


8 Answers

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

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

http://www.pageresource.com/html5/input-validation-tutorial/

あなたのdoctypeがhtmlでない場合は、javascript / jqueryを使用する必要があると思います。

Question

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

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




私はこれと少し戦った。 ここや他の多くのソリューションは複雑に思えました。 このソリューションは、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()はそれをしない)を与えることがhere記載さhereています。 サーバー/バックエンドに送信された値は、ここでも検証されます。




受け入れられた答え:

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

元の投稿にコメントを付けることができますが、私の評判は低すぎる(このアカウントを作成したばかりです)。




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はコードをテストしていませんでしたが、タイプミスをチェックしないと、多かれ少なかれ正しいはずです:D文字列がnullまたは空であれば、何をするかといったいくつかのことを追加したいかもしれません。







このコードを使用する場合、Mozilla Firefoxでバックスペースボタンを使用することはできません。バックグランドはChrome 47 && event.charCode <58;でのみ使用できます。pattern = "[0-9] {5}"必須>




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 : "#" & "$" & "%"
            else if (e.shiftKey && (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);" />




一般的な目的のために、以下のように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)"/>



JavaScript言語を使用して、あなたのウェブページ上のテキスト入力要素の値のクロスブラウザフィルタの私のプロジェクトを見てください: Input Key Filter 。 値を整数値、浮動小数点数としてフィルタリングするか、電話番号フィルタなどのカスタムフィルタを書き込むことができます。 入力コードの例を整数値で見る:

<!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>

入力キーフィルターの例の私のページ「Integer field:」も見てください




Related