HTML5の「数値」要素で可能な入力を制限するにはどうすればよいですか?


359

以下のため<input type="number">の要素、maxlength機能していません。maxlengthその数値要素のをどのように制限できますか?


5
よりよい解決策を探している人々のために、これは最高です: stackoverflow.com/questions/9361193/...
Ünsalコルクマズ

4
AndroidタブレットのChromeブラウザでは、max属性が機能しません。
Foreever

4
ÜnsalKorkmaz@:そのソリューションは、Androidデバイス上の数字キーパッド起動しないという欠点がある
ウィル

回答:


340

そして、max挿入できる最大の数を指定する属性を追加できます

<input type="number" max="999" />

a maxmin値の両方を追加する場合は、許可される値の範囲を指定できます。

<input type="number" min="1" max="999" />

上記静止うない手動で指定された範囲の値の外側に入ることからユーザーを停止します。代わりに、次のスクリーンショットに示すように、フォームを送信すると、この範囲内の値を入力するように指示するポップアップが表示されます。

ここに画像の説明を入力してください


4
クリスター、これはうまくいった。また、@ Andyが言ったように、追加の数値をスライスするためにoninputを使用しました。参照mathiasbynens.be/notes/oninput
Prasad

7
@Prasad-アンディの答えが正しければ、最も投票されたものではなく、それを選択します。
Moshe

81
これは正しいですが、Andyはこれにより長い数字を入力することを制限しないと述べているため、注意する必要があります。したがって、これは実際にはテキストフィールドのmaxlengthと同等ではありません。
DA。

9
より高精度の浮動小数点数を入力しただけの場合、これは壊れます。それが1未満999と大きいので、例えば3.1415926この周りを取得
0112

44
なぜうまくいかないのにこれがなぜ賛成され、受け入れられるのか、私にはわかりません!それだけで「スピナー」のコントロールに影響を与え、そして中に長い番号を入力してユーザーを停止するには何もしません。
Codemonkey

115

minおよびmax属性を指定できます。これにより、特定の範囲内でのみ入力が許可されます。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

ただし、これはスピナーコントロールボタンに対してのみ機能します。ユーザーが許可されている数より大きい数値を入力できる場合もありますがmax、フォームは送信されません。

最大値より大きい数値に対するChromeの検証メッセージ
Chrome 15から取得したスクリーンショット

あなたはできる HTML5の使用oninput文字の数を制限するために、JavaScriptでイベントを:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
そのJavaScriptアプローチで考えられる1つの問題:挿入ポイントが値の最後にない場合、期待どおりに動作しない可能性があります。たとえば、入力フィールドに値「1234」を入力し、挿入ポイントを値の先頭に戻し、「5」と入力すると、値は「5123」になります。これは、maxlengthが4の入力type = "text"フィールドとは異なります。ブラウザでは、「full」フィールドに5番目の文字を入力できず、値は「1234」のままです。
Jon Schneider

@Andy、明らかに質問はJS以外の方法を探していますmaxlength.............
Pacerier

4
@Pacerier:私の答えにある何かは、私が別の方法で考えていることを意味しましたか?ご覧のとおり、OPがユーザーが許可されているよりも多くの文字を入力しないようにするためにJavaScriptを使用するという追加の提案とともに、HTMLのみを使用して実現できる最も近い可能なソリューションを提供しました。
アンディE

84

ユーザーにフルテキストキーボードではなくテンキーを表示したいモバイルWebソリューションを探している場合。type = "tel"を使用します。それは余分なjavascriptを作成することからあなたを救うmaxlengthで動作します。

最大値と最小値は、ユーザーが最大値と最小値を超える数値を入力することを許可しますが、これは最適ではありません。


3
すばらしい発見です。これは魅力のように機能しました。追加のJavaScriptを作成する必要がないことを高く評価しています。
ディエゴ

9
「tel」入力では追加の記号が可能であり、各数値の横に文字が表示されるため、これは数値入力に最適なソリューションではないことがわかりました。純粋に数字のキーボードはずっときれいに見えます。
hawkharris 14

@hawkharris正解です。type= "number"の方がきれいなUIです。間違った文字を誤って入力する方が簡単です。したがって、ユーザーが不正なデータを入力しないようにするには、追加の検証が必要です。しかし、ユーザーがすべての小数点を数字キーボードでも同様に簡単に入力できることも考慮してください。また、追加のJavaScriptなしでは上記の問題は解決しません。
Duane

1
ありがとう、私はイオンフレームワークモバイルアプリに取り組んでおり、これで私の問題が解決しました
Ahmed

1
pattern = "[0-9] *"と一緒に使用した場合、追加の記号は無効になります
apereira

71

これらすべてを次のように組み合わせることができます。

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


更新:
数値object.length入力では空の文字列になるため、長さがになるため、数値以外の文字を入力しないようにすることもできます0。したがって、maxLengthCheck関数は機能しません。

解決策:
については、こちらまたはこちらをご覧ください。

デモ -次のコードの完全版をご覧ください:http :
//jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新2:更新コードは次のとおりです:https : //jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新3: 小数点以上の入力を許可すると、数値が乱れることに注意してください。


これは良い解決策ですが、数値以外の値が入力された場合、object.value.lengthは0を返します。
Andrew

1
@AndrewSpearこれは、タイプが「数値」に設定されている入力に数値以外の値を入力すると、object.valueが空の文字列になるためです。ドキュメントを参照してください。また、この問題を修正するために私のアップデートを読んでください。
David Refoua

これは、111..1111のように複数の小数点を入力した場合でも機能しません。悪意のあるコードが通過する可能性があるため、セキュリティのためにこのコードを使用しないでください。
PieBie

@PieBie Dude、このコードは3年以上前のものです。代わりにjQueryを使用してください。
David Refoua

1
ええ、私はそれを知っていますが、初心者はまだそれをコピーして貼り付けるだけかもしれません。
PieBie

26

それは非常に簡単です、あなたがシミュレートできるいくつかのjavascriptでmaxlength、それをチェックしてください:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

12
このソリューションでは、2文字に達するとバックスペースを使用できません。しかし、私は機能的な解決策についてはほとんど逃しません
Christophe Debove

12
onKeyDownの代わりに、onKeyPressを使用する必要があります。
Rupesh Arora 2016

1
テキストを強調表示して文字を押すと(つまり、入力内容を置き換えるために)
機能しません

検証この本には、以下のものではない場合、キーはstackoverflow.com/a/2353562/1534925
Akshay

3
問題keydownは、最大文字数でバックスペースを使用できないことです。問題keypressは、最大文字数を超えてコピーして貼り付けることができることです。
Stavm 2017

23

または、最大値がたとえば99で最小値が0の場合、これを入力要素に追加できます(値は最大値などで書き換えられます)。

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

次に、(必要に応じて)入力が本当に数値かどうかを確認できます


...すばらしいですが、最小値と最大値はもう必要ありません。(言っているだけ)
xoxel 2016

2
@xoxel警告メッセージを引き続き表示したい場合
DNKROZ

これは本当に良いです...ありがとう
Vincy Oommen

一般化のために私はやろうonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
oriadam

18

テキストとして指定できますが、番号のみに一致するpetternを追加します。

<input type="text" pattern="\d*" maxlength="2">

それは完璧に動作し、モバイル(iOS 8およびAndroidでテスト済み)でも数字キーボードが飛び出します。


pattern属性はIE9以前のバージョンではサポートされておらず、Safariでも部分的にサポートされています。caniuse.com
#

はい、指摘していただきありがとうございます。ただし、IE9のサポートを削除(マスタードを切り取り)しました。JSメソッドよりも優先します。プロジェクトによって異なります。
Chris Panayotoff、2015年

2
これにより、ユーザーは数字以外の文字を入力できます。彼らは任意の文字を2つ入力できます。pattern検証のみのハイライトの原因となります。
brt 2018年

Android 9(Nokia 8)でテスト済みですが、通常のキーボードを入手しています:(何かアイデアはありますか?
oriadam

14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

「onkeypress」イベントを使用する場合、開発中(ユニットテスト)にユーザーの制限が発生することはありません。また、特定の制限の後にユーザーが入力できないようにする必要がある場合は、このコードを確認して1回試してください。


1
ここで私が見る問題は次のとおりです。1。入力が7の数値に達した場合、テキストを選択して置換すると機能しません。ボタン。制限を破る
Edub

簡単なバージョンのjavascriptで試しました。必要に応じて、実行コードスニペットを使用して表示できます。そのため、制限はありませんでした。
Prasad Shinde 2017年

1
制限も見つかりませんでした。7桁で止まります。このソリューションをコードに使用しています。
Claudio

制限があります。限界に達したら、すべてを選択して置き換えたいのですが機能しません。置換が機能するのは、falseを返す前にcurで値を上書きした場合のみです。
Insomnia88

@ Insomnia88、@ edub関数を記述して必要な条件を確認したらどうなるか
Prasad Shinde

12

別のオプションは、maxlength属性を持つすべてのリスナーを追加し、それにスライス値を追加することです。ユーザーが入力に関連するすべてのイベント内で関数を使用したくないと仮定します。これがコードスニペットです。CSSとHTMLコードは無視してください。重要なのはJavaScriptです。

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>


10

最大長は<input type="number"oninputイベントを使用して最大長を制限するのが最善の方法では機能しません。簡単な実装については、以下のコードを参照してください。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

魅力のように働いた!
SiboVG

9

最大許容値を1000にしたいとしましょう-入力またはスピナーで。

次を使用してスピナーの値を制限します。 type="number" min="0" max="1000"

そして、javascript: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

8

他の人が述べたように、min / maxはmaxlengthと同じではありません。意図した最大文字列長よりも長い浮動小数点数が入力される可能性があるためです。maxlength属性を真にエミュレートするには、次のようなことを簡単に実行できます(これはmaxlength = "16"と同等です)。

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

スライスを途中に挿入すると、エンドユーザーの知らないうちに文字が削除されます。一方、max-lengthはブロックします。
Pradeep Kumar Prabaharan

@PradeepKumarPrabaharan maxlengthは数値入力ではサポートされていません。私の例でvalue.slice(0,16)は、入力値が16文字を超えない限り、起動しません。
thdoan

はいMAXLENGTHは番号入力のためにサポートされていません...このコードはGUDですが、このコードは正確にMAXLENGTHのプロパティと一致していません...
プラディープ・クマールPrabaharan

@TobiasGaertner type="number"がそれを処理します:)。
thdoan

@ 10basetom ...ブラウザによって異なります...例:FFでも文字を入力でき、制限後に文字が止まりません-タイプ番号の考え方に関連して、これは許容できる解決策です。
Tobias Gaertner、2016年

6

Maycow Mouraの答えは良いスタートでした。ただし、彼の解決策は、2桁目を入力すると、フィールドのすべての編集が停止することを意味します。したがって、値を変更したり、文字を削除したりすることはできません。

次のコードは2で停止しますが、編集を続行できます。

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

2
いいえ。値を貼り付けてみてください。
Qwertiy、2015

6

以前にこの問題があり、html5数値タイプとjQueryの組み合わせを使用して解決しました。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

イベントが少しやりすぎかどうかはわかりませんが、問題は解決しました。 JSfiddle


あなたは簡単に文字を貼り付けることができます。
ジェシカ・

4

HTML入力

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

4

数値入力のmaxlengthを設定する簡単な方法は次のとおりです。

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

Android Chromeでは機能しません。onkeypressにはこれに関するいくつかの問題があります。
アーカシュタクル

3

と同じように type="number"、プロパティのmax代わりにmaxlength、可能な最大数であるプロパティを指定します。したがって、4桁の場合max9999、5桁にする必要があります99999

また、それが正の数であることを確認したい場合は、設定することができます min="0"ます。


3

ああ。それは誰かがそれを実装することの半分をあきらめ、誰も気づかないと思ったようなものです。

何らかの理由で、上記の回答ではminand max属性を使用していません。このjQueryはそれを完成させます。

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

これらの「jQuery-is-the-devil」タイプのいずれかである場合、jQueryなしの「oninput」という名前の関数としても機能します。


それは質問に正しく答えませんが、私の問題を解決したので投票しました:)
TrOnNe 2018年

2

私が見つけたように、あなたはモバイルブラウザを含む完全なソリューションのためにonkeydownonkeypressまたはonkeyupイベントを使用することはできません。ちなみに、onkeypress廃止予定であり、Androidのchrome / operaには存在しません(参照:UIイベントW3Cワーキングドラフト、2016年8月4日)参照)。

oninputイベントのみを使用して解決策を見つけました。必要に応じて、負/正の符号または小数点と1000桁の区切り記号など、追加の数値チェックを行う必要がある場合がありますが、最初は次のようにすれば十分です。

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

私はまた、上記のように何度か組み合わせmaxlengthminmax間違った提出を防ぐことを勧めます。


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

または何も入力できないようにしたい場合

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

長さ制限のある数値入力でもこれを試すことができます

<input type="tel" maxlength="3" />

@tiltdown誤字脱字。答えを修正しました。
shinobi

1

私はすでに答えがあることを知っていますが、入力をmaxlength属性とまったく同じように、またはできるだけ近くに動作させたい場合は、次のコードを使用します。

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

@Phill_t多分あなたは私を啓発することができますか?私はあなたのコードを使用しましたが、それはプリンシパルでうまく機能していますが、 "$(this).attr(" maxlength ")"は常に2を提供します。私がテストして期待どおりに機能していた「this.maxlength」だけでなく、それが機能していて、短くて見た目もはっきりしている場合はどうですか?私は何かを逃しましたか?
マーカスの2017

「デリバリー2」とはどういう意味ですか?
Philll_t 2017年

ごめんなさい。「this.maxLength」は、キーダウン関数のスコープでのみ機能します。関数「addMax」では、「this」は期待される要素ではなくドキュメントであるため、属性値が異なります。代わりに数値入力にアクセスするにはどうすればよいですか?上記のコードは本当にあなたの側で働いていますか?私はChrome / Opera / Vivaldi、Firefox、Edge、IE、Safariでテストしましたが、各ブラウザーで同じ結果が得られました。さて、確かに機能しているEdgeのmaxlegth = "1"とmaxlength = "2"では、 "$(this).attr(" maxlength ")"はそれ以上の数値ではさらに増加し​​ません!!?@anybody:提案はありますか?
markus s

先ほど述べたように、デバッグ中に見つけた問題の要素ではなく、ドキュメントで呼び出されるため、常に2です。ちなみに、あなたがあなたの解決策を研究した後に私が考え出した私の解決策を見てみたいかもしれません:stackoverflow.com/a/41871960/1312012
markus s


0

これは誰かを助けるかもしれません。

少しのJavaScriptで、すべての日時ローカル入力を検索し、ユーザーが入力しようとしている年が将来100年を超えているかどうかを検索できます。

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.