web-dev-qa-db-ja.com

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

私はjQueryを使ってHTML5の検証を実装するjQueryツール Validator を使っています。 1つのことを除いて、これまでのところうまくいっています。 HTML5仕様では、入力型 "number"は整数と浮動小数点数の両方を持つことができます。データベースフィールドが符号付き浮動小数点数である場合にのみ有用なバリデータになるので、これは非常に近視眼的に見えます（符号なしintの場合は "パターン"検証にフォールバックする必要があります。それをサポートするブラウザのために）。他の入力タイプ、あるいはおそらく入力を符号なし整数に制限する属性がありますか？見つからなかった、ありがとう。

_編集_

わかりました、私はあなたの時間と助けに感謝します、しかし私は多くの見逃された賛成投票が起こっているのを見ます：D。ステップを1に設定しても、入力が制限されないため、答えにはなりません。テキストボックスに負の浮動小数点数を入力することができます。また、私はパターン検証を知っています（私の最初の投稿で述べました）が、それは問題の一部ではありませんでした。私はHTML5がタイプ "number"の入力を正の整数値に制限することを許しているかどうか知りたいと思いました。この質問に対する答えは、「いいえ、そうではありません」と思われます。パターン検証を使用したくないのは、jQuery Tools検証を使用する際にいくつかの欠点があるためですが、現在ではこの仕様ではこれを行うためのより明確な方法が認められていないようです。

jqueryhtml5validationjquery-tools
216
JayPea

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

HTMLだけで達成できる最高のもの

    <input type="number" min="0" step="1"/>
277
Aurélien Ooms

step属性を1に設定します。

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

現時点では、これはChromeのバグが多少大きいため、最善の解決策ではないかもしれません。

より良い解決策は、入力を一致させるために正規表現を使うpattern属性を使うことです。

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

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

156
js-coder

JavaScriptを使った簡単な方法：

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
33
Tarek Kalaji
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

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

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

25
thejustv

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

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

私は私のために叫ぶ:)

16
Viktor Karpyuk

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

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
14
karthick

パターンは常に制限のために好ましいです、1から先の数字だけを入力するためにoninputとminが1を試みるようにしてください

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
8
Noothan y v
 <input type="number" min="0" step="1" pattern="\d+"/>
5
Nikolay_R

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

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

はい、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（動作しませんでした）を使用して試しました。

4
wilsonfoz

たぶんそれはすべてのユースケースに合うわけではありませんが、

<input type="range" min="0" max="10" />

良い仕事をすることができます： フィドル 。

ドキュメンテーション をチェックしてください。

3
Luca Fagioli

私はChromeで働いていて、html属性を使用しているにもかかわらず、いくつか問題がありました。私はこのJSコードになった

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

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

        return true;
});
3
a.valchev

step="any"を設定してください。正常に動作します。参照： http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/ /

3
udit mittal

step属性を任意の浮動小数点数に設定します。 0.01とあなたは行くのがいいです。

2
Mantas K.

スペックから

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

それで、あなたはそれを単に1にセットすることができました：

2
David Hedlund

それをあなたの入力フィールドに入れるだけです：onkeypress='return event.charCode >= 48 && event.charCode <= 57'

2
illeas
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);
    }
});
1
Sarthak

現在のところ、ユーザーがHTMLのみを使用して入力に10進値を書き込むのを防ぐことはできません。あなたはjavascriptを使わなければなりません。

0
Michal