html - HTML入力タグが数値のみを受け入れるようにするにはどうすればよいですか？

Question

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

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

score 317 · Accepted Answer

HTML 5

HTML5入力タイプnumberを使用して、数値エントリのみを制限できます。

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

score 45 · Accepted Answer

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

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

入力検証チュートリアル

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

score 29 · Accepted Answer

迅速で簡単なコード

<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)))" />

score 17 · Accepted Answer

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

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

それはうまくいくでしょう。

score 10 · Accepted Answer

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

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

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

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

http://jsfiddle.net/VmtF5/

アップデート2018-03-12：ブラウザのサポートが大幅に改善され、以下でサポートされるようになりました。

六価クロム
Firefox29以降
Opera 10.1+
Safari 5+
角
（Internet Explorer 10以降）

score 7 · Accepted Answer

<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" />

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

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/

score 5 · Accepted Answer

次の1行のコードを次のように使用できます。

<input type="text" onkeypress="return /[0-9]/i.test(event.key)" >

数字を受け入れます。

score 4 · Accepted Answer

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

楽しみ！

score 4 · Accepted Answer

私はこれと少し戦った。ここや他の場所での多くの解決策は複雑に見えました。このソリューションでは、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（）はそれを行いません）。サーバー/バックエンドに送信された値は、引き続きそこで検証する必要があります。

score 4 · Accepted Answer

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

たとえば、<input type='number' />

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

score 4 · Accepted Answer

簡単ですか？

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});

<input id="inputField" type="text">

score 3 · Accepted Answer

使って<input type="number"...>みませんか？

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

また、検証にJavascriptを使用する例がいくつかある質問があります。

更新：より良い質問にリンクされています（alexblumに感謝します）。

score 3 · Accepted Answer

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または空の場合の対処方法などを追加したい場合があります。また、これをより速くすることもできます：D

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

受け入れられた答え：

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

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

score 3 · Accepted Answer

3

入力タグ内に追加します：onkeyup = "value = value.replace（/ [^ \ d] / g、''）"

于 2018-07-05T04:25:42.633 に答える

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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>

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

score 2 · Accepted Answer

投稿された回答を更新して、以下を追加しました。

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

http://www.texotela.co.uk/code/jquery/numeric/ これともちろんTexoTelaに言及したLeoVũへの数値入力クレジット。テストページ付き。

score 1 · Accepted Answer

汎用的には、次のように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)"/>

score 1 · Accepted Answer

かなりうまく機能するさらに別の方法。

<input type="text" name="celular" placeholder="Ej. 6756892" maxlength="8" id="telefono"   oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" >

この修正の優れている点は、コピーして貼り付けた値もルールに含まれていることです。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

例：

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

score 0 · Accepted Answer

を使用する<input type="number">と、数値である入力のみが受け入れられます。
数値以外の値を使用して、以下の2つのフォームを送信してみてください。

<form>
<!-- some code -->
 <input type="number">
 <button>SUBMIT</button>
 </form>

古いブラウザはをサポートしていませんtype=number。したがって、JavaScriptで検証できます。

<form onsubmit=
 "if (isNaN(document.getElementById('validatethis').value)) return false;">
<!-- some code -->
 <input type="text" id="validatethis">
 <button>SUBMIT</button>
 </form>

score 0 · Accepted Answer

0

一行で使えます

<input onkeypress="return /[0-9]/i.test(event.key)" >

于 2022-01-17T12:17:32.117 に答える

score 0 · Accepted Answer

受け入れられた答えはすでに良いですが、ユーザーが（左または右のカーソルキーを使用して）入力をナビゲートし、場合によっては（削除またはバックスペースを使用して）入力を修正できるようにする必要がある場合キーボードのキー）、この方法を使用することを選択できます。

この方法のもう1つの利点は、数字キーパッドからの数字に加えて、キーボードの一番上の行の両方からの数字を受け入れることです。

入力HTML要素は次のようになります...

<input type="number"
  onkeydown="return validateIsNumericInput(event)"
  ...
  any other attributes for the input element
>

JavaScript関数は次のようになります。

/**
Checks the ASCII code input by the user is one of the following:
    - Between 48 and 57: Numbers along the top row of the keyboard
    - Between 96 and 105: Numbers in the numeric keypad
    - Either 8 or 46: The backspace and delete keys enabling user to change their input
    - Either 37 or 39: The left and right cursor keys enabling user to navigate their input
 */

function validateIsNumericInput(evt) {
    var ASCIICode = (evt.which) ? evt.which : evt.keyCode
    permittedKeys = [8, 46, 37, 39]
    if ((ASCIICode >= 48 && ASCIICode <= 57) || (ASCIICode >= 96 && ASCIICode <= 105)) {
        return true;
    };
    if (permittedKeys.includes(ASCIICode)) {
        return true;
    };
    return false;
}

score 0 · Accepted Answer

私の理解では、テキスト入力ボックスには数値のみを許可する必要があります。私は初心者なので、このロジックにも苦労しました。この問題はES6で簡単に解決できます。これが私が思いついた最も簡単な解決策です。

function test(){
    for (var i = 0; i < document.getElementById("element").value.length; i++) {
        if (isNaN(document.getElementById("element").value[i])){
            document.getElementById("element").value = '';
            console.log(document.getElementById("element").value[i])
        }
    };
}

このコードは浮動小数点数では機能しないことに注意してください！

html - HTML入力タグが数値のみを受け入れるようにするにはどうすればよいですか？

31 に答える 31

HTML 5

JavaScript

Related

Reference