HTML5：整数のみを取る数値入力タイプ？

249

私はjQueryツールを使用しています を介してHTML5検証を実装 Validatorを。これまでのところ、1つのことを除いて、うまく機能しています。HTML5仕様では、入力タイプ「数値」は整数と浮動小数点数の両方を持つことができます。これは、データベースフィールドが符号付き浮動小数点数である場合にのみ有効なバリデーターとなるため、信じられないほど近視眼的です（符号なしintの場合、「パターン」検証にフォールバックする必要があり、そのため、アップやダウンなどの追加機能が失われますそれをサポートするブラウザの矢印）。入力を単に符号なし整数に制限する別の入力タイプまたはおそらく属性がありますか？見つかりませんでした、ありがとう。

編集

わかりました、皆さん、時間と手助けに感謝しますが、多くの不当な賛成投票が行われているのがわかります。ステップを1に設定しても、入力が制限されないため、答えにはなりません。テキストボックスに負の浮動小数点数を入力することもできます。また、私はパターン検証を認識しています（元の投稿で触れました）が、それは質問の一部ではありませんでした。HTML5でタイプ「数値」の入力を正の整数値に制限できるかどうか知りたいと思いました。この質問に対する答えは、「いいえ、そうではない」でしょう。jQueryツールの検証を使用するときにいくつかの欠点が発生するため、パターン検証を使用したくありませんでしたが、仕様ではこれを行うためのより明確な方法が許可されていないようです。

jquery  html  validation  jquery-tools 
— ジェイピー
ソース
3
2019年現在、いつからかはわかりませんが、10進値を許可するattrに明示的な値を設定しない限り、number入力（少なくともFF / Chrome / Safariで）はデフォルトで整数のみを受け入れるようになりました。例：。MDNはここに文書化されています。これは賢明なデフォルトだと思いますが、重大な変更でもあるので、2人の考えではそうです（そうです、私が書いたいくつかのコードに影響を与えました）。stepstep="0.01"
— Darragh Enright

回答:

326

https://www.w3.org/wiki/HTML/Elements/input/number

HTMLのみで達成できる最高の

<input type="number" min="0" step="1"/>
スニペットを展開

— オーレリアン・ウームス
ソース
6
おそらく、彼は正の数（負でない数ではない）を望んでいるminため1、に設定する必要があります。
— Martin Thoma、2014年
1
@pwdst私はそれを2番目にします。<input type="number" min="0" step="1"/>質問に対する最も正しい答えです。とにかく、との両方step="1"を持つことの意味は何pattern="\d+"ですか？どちらの場合も、浮動小数点数を入力できません。
— デンマークのアシュファク2014
27
これは最新バージョンのChromeでは機能しませんでした。文字を入力することはできませんが、特殊文字を挿入することはできます。
— Malavos、2015
2
なぜ私はeと入力できるのですか
— sunを
4
指数値の場合は@grantsun（例：10e20）。
— sn3ll
180

step属性を1次のように設定します。

<input type="number" step="1" />

これは現在Chromeで少しバグがあるようですので、現時点では最善の解決策ではないかもしれません。

より良い解決策はpattern、正規表現を使用して入力を照合する属性を使用することです。

<input type="text" pattern="\d*" />

\dは数値の正規表現であり、複数の数値を*受け入れることを意味します。ここにデモがあります：http : //jsfiddle.net/b8NrE/1/

— js-coder
ソース
2
JayPeaが学んだように、すべてのブラウザーがまだすべてのHTML5要素をサポートしているわけではないので、提案したように、グレースフルデグラデーションを提供するのが最善です。
— 2012年
6
@Zut HTML5の検証によって、これらのキーの入力が妨げられることはありません。フォームがこれらの文字で送信されないようにするだけです。number他の文字を含むタイプの入力でフォームを送信すると、Chromeからエラーメッセージが表示されます。
— js-coder
2
@dotweb-私はあなたの要点を理解しています。2つの違いは、number属性では、入力の選択を解除（トリガーブラー）すると、すべてのアルファベット文字が自動的に削除されることです。これは、pattern属性を使用する場合は発生しません。この違いは、AJAXを使用してデータを投稿しsubmit、投稿をトリガーする以外のイベントを使用している場合にのみ重要だと思います。
— Zut
6
これはOPが要求したことを行いません。整数のみ /\d*/.test(1.1) // true
— vsync 2018
2
@vsyncはpattern="\d*"同じではない/\d*/、pattern="\d*"と等しい/^(?:\d*)$/を参照してください、HTML5 パターン属性のドキュメント。
— WiktorStribiżewSep
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

このコードを使用すると、テキストフィールドへの入力は、数字のみを入力するように制限されます。パターンはHTML 5で利用可能な新しい属性です。

パターン属性ドキュメント

— thejustv
ソース
9
仕様によれば、パターン属性は、入力タイプがテキスト、検索、URL、電話、電子メール、パスワード（ここでは「テキスト」タイプで示されている）の場合にのみ使用できます。これは、このメソッドを使用すると、数値入力タイプのセマンティクス、したがって（重要な）一部のタブレットや携帯電話の画面上の数値キーボードが失われることを意味します。
— pwdst 2014年
3
Firefox 36.0ではこれにより、文字や特殊文字を入力できます。
— Malavos、2015
1
入力を数字だけに制限するのではなく、文字を入力することもできます！
— HadidAli
35

JavaScriptを使用した簡単な方法：

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
— タレク・カラジ
ソース
わかりreplace(/(\..*)\./g, '$1')
— ませ
3
これは、浮動小数点数を受け入れ.、1回だけ繰り返す、たとえば123.556書き込むことができるようにするために重要です。
— Tarek Kalaji 2017年
8
@TarekKalaji-質問は浮動小数点数ではなく整数を示します
— vsync
モバイルデバイスはどうですか？タイプテキストはすべてのキーボードを表示するため（英数字も含まれます）
— Nuri YILMAZ
27

パターンはいいですが、入力をtype = "text"でのみ数値に制限したい場合は、以下のようにoninputと正規表現を使用できます。

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

私は私のためにウォークします:)

— ヴィクトル・カルピュク
ソース
このアプローチは、（変更）メソッド（イベントハンドラー）を無効にし、入力ボックスのデフォルト値を消去する可能性があることに注意してください。
— HadidAli
14

これはhtml5だけではなく、すべてのブラウザが正常に動作しています。これを試して 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
— Leopard
ソース
12
これは悪いです。入力試行：Shift + Home、Shift + End、Ctrl + A、Ctrl + C、Ctrl + V。oninput代わりに使用してください
— zanderwar '10年
1
この回答が書かれたとき、HTML5は公開されていませんでした。@zanderwar
— Muhammet Can TONBUL
11

パターンは常に制限のために好ましく、試みるoninputとmin以降1から数字のみを入力するための1を発生

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
— Noothan yv
ソース
それは非常に興味深いソリューションです。`value = $ {var}`の意味は？
— 開発者
その入力用@AcademyofProgrammer例のデフォルト値
— Shinigamae
ベストアンサー！貼り付けに対応し、IE（10+）でも機能し、入力のタイプを介してキーボードを自由に表示でき、フィールド内の厄介な上下矢印をChromeに表示しません。
— Janosch
5

stepこのように属性を1に設定してみましたか

<input type="number" step="1" />
— DevTeamExpress
ソース
3

はい、HTML5はサポートします。このコードを試してください（w3school）：

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

最小および最大パラメーターを確認しますか？Chrome 19（動作する）とFirefox 12（動作しなかった）を使用して試してみました。

— ウィルソンフォス
ソース
これは、既知の範囲が必要であることを前提としています。しかし、整数値が必要な場合でも、これは機能しますか？
— RandomHandle 2017年
3

入力フィールドに入力するだけです： onkeypress='return event.charCode >= 48 && event.charCode <= 57'

— イレアス
ソース
3

Chromeで作業していて、html属性を使用していても問題が発生しました。私はこのjsコードで終わった

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
— a.valchev
ソース
私もこれを1つのマイナーな微調整で使用しました。私はのparseInt（value.replace（へのparseInt（値）を変更し、 『』）これは私が1.56を貼り付けると156の代わりに、1。で表示された値を維持することができ「」。
— codescribblr
2

スペックから

step="any"または正の浮動小数点数
要素の値の粒度を指定します。

したがって、次のように設定するだけです1。

— デビッド・ヘドルンド
ソース
8
私はこれを試しましたが、問題はまだテキストボックスに浮動小数点数を入力できることです。
— JayPea
それで、ユーザーが小数点を入力するのをブロックするコードが必要ですか？
— Blazemonger
2

step属性を0.01などの任意の浮動小数点数に設定すれば、問題ありません。

— マンタスK
ソース
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
— サルタック
ソース
0

現在、ユーザーがHTMLのみで入力に10進数値を書き込むことを防ぐことはできません。JavaScriptを使用する必要があります。

— ミハル
ソース
-2

Future™（「使用できるかどうか」を参照）では、キーボードを提示するユーザーエージェントで、テキスト入力をで数値のみに制限できますinput[inputmode]。

— Weston
ソース
inputmode主にハンドヘルドデバイス用であり、正しいキーボードレイアウトをトリガーしますが、キーボードを備えた「通常の」コンピュータの場合、必要なものを何でも入力できます。
— vsync 2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.