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



8 Answers

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

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

ただし、これはスピナーコントロールボタンでのみ機能します。 ユーザーは許可されたmax数を超える数値を入力することができますが、フォームは送信されません。


Chrome 15からのスクリーンショット

HTML5 oninputイベントをJavaScriptで使用すると、文字数を制限できます。

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

<input type="number">要素の場合、 maxlengthは機能しません。 その番号要素のmaxlengthをどのように制限できますか?




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

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



あなたは次のようにこれらをすべて組み合わせることができます:

<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関数は機能しません。

溶液:
例についてはthisまたはthisを参照してください。

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

アップデート2:アップデートコードは次のとおりです: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/ : https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Update 3:小数点以上を入力すると、数値が混乱する可能性があることに注意してください。




または、最大値がたとえば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">

次に(もし望むなら)本当に数字が入力されているかをチェックすることができます




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

  });



他の人が述べたように、min / maxはmaxlengthと同じではありません。なぜなら、人々は意図した最大文字列長より大きい浮動小数点数を入力できるからです。 maxlength属性を真にエミュレートするには、ピンチでこれを行うことができます(これはmaxlength = "16"と同じです):

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



//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"イベントを使用すると、開発中(ユニットテスト)にはユーザの制限はありません。 そして、あなたが特定の制限の後に入力することを許可しないという要件があるなら、このコードを見て、一度試してみてください。




type="number"同様に、 maxlengthプロパティの代わりにmaxを指定します。これは可能な最大数です。 したがって、4桁の場合、 max99999桁の99999などとなります。

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




私は既に回答があることを知っていますが、あなたの入力が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();



Related