web-dev-qa-db-ja.com

jquery：オプションタイプ番号に最小最大入力を設定

私はコードのこの部分を持っています

<input type="number" min="2" max="10" step="2" id="contact" oninput="new_sum">

フィールドに、10以上2以下の数値を挿入できます。

どうすれば制限できますか？

jquerynumbersmaxmin
11
user2519913

onchange関数を追加し、値が範囲外の場合は値を設定します。

 $(function () {
       $( "#numberBox" ).change(function() {
          var max = parseInt($(this).attr('max'));
          var min = parseInt($(this).attr('min'));
          if ($(this).val() > max)
          {
              $(this).val(max);
          }
          else if ($(this).val() < min)
          {
              $(this).val(min);
          }       
        }); 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberBox" type="number" min="2" max="10" step="2" id="contact"  />
28
caspian

ここで使用したアプローチは（そうするためのプラグインを作成しましたが）、入力された値がminおよびmax属性で定義された範囲内にあるかどうかを確認することです。 isその値を保持します。 ifnot入力された値がmin値よりも小さいかどうかをテストし、そうであれば値tomin値。そうでない場合（値がmaxよりも大きくなければならないことを意味する）、値をmax属性に設定します。

_(function ($) {
    $.fn.restrict = function () {
        // returns the collection returned by the selector, over which we iterate:
        return this.each(function(){
            // binding a change event-handler:
            $(this).on('change', function(){
                // caching the 'this' (the current 'input'):
                var _self = this,
                    // creating numbers from the entered-value,
                    // the min and the max:
                    v = parseFloat(_self.value),
                    min = parseFloat(_self.min),
                    max = parseFloat(_self.max);
                // if it's in the range we leave the value alone (or set
                // it back to the entered value):
                if (v >= min && v <= max){
                    _self.value = v;
                }
                else {
                    // otherwise we test to see if it's less than the min,
                    // if it is we reset the value to the min, otherwise we reset
                    // to the max:
                    _self.value = v < min ? min : max;
                }
            });
        });
    };
})(jQuery);

$('#contact').restrict();
_

JS Fiddle demo 。

restrict()プラグインは_<input>_要素の型がnumber（まだ）であるかどうかをテストしないため、これはやや単純です。

Editedは、要素が実際に_type="number"_であることを確認するためのわずかな健全性チェックを追加します。

_(function ($) {
    $.fn.restrict = function () {
        return this.each(function(){
            if (this.type && 'number' === this.type.toLowerCase()) {
                $(this).on('change', function(){
                    var _self = this,
                        v = parseFloat(_self.value),
                        min = parseFloat(_self.min),
                        max = parseFloat(_self.max);
                    if (v >= min && v <= max){
                        _self.value = v;
                    }
                    else {
                        _self.value = v < min ? min : max;
                    }
                });
            }
        });
    };
})(jQuery);
_

JS Fiddle demo 。

4
David Thomas

許可しないユーザーが間隔の外側に値を入力または貼り付けるまたはその他の非数値文字（手動でキーを解析または検出する必要なし）：

_$('input[type=number]').on('mouseup keyup', function () {
  $(this).val(Math.min(10, Math.max(2, $(this).val())));
});_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="2" id="contact">_

この特定のイベントが特定の入力にのみ必要な場合は、id、つまり$('#contact').on(...)を使用します。 説明：これらの 数学関数 引数がない場合のInfinityとの比較。

注：mouseupは、ユーザーがカーソルで矢印を貼り付けたり使用したりするのを防ぐためにも使用できます。

3
Armfoot

jquery set min max input（すべてのタイプ）

タグ入力で属性の最小値と最大値を設定

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<input type="tel" class="form-control text-right ltr" data-min_max data-min="0" data-max="100" data-toggle="just_number" />

最小と最大を変更できます

data-min = "0" data-max = "100"

JQuery

$(document).on('keyup', '[data-min_max]', function(e){
    var min = parseInt($(this).data('min'));
    var max = parseInt($(this).data('max'));
    var val = parseInt($(this).val());
    if(val > max)
    {
        $(this).val(max);
        return false;
    }
    else if(val < min)
    {
        $(this).val(min);
        return false;
    }
});

$(document).on('keydown', '[data-toggle=just_number]', function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
         // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
         // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

例： jsfiddle

1
Mohammad

任意の入力ステップ要素でこれを行う汎用関数を使用できます-

 $(function () {

    var limitInput = function () {
        var value = parseInt(this.value, 10);
        var max = parseInt(this.max, 10);
        var min = parseInt(this.min, 10);

        if (value > max) {
            this.value = max;
        } else if (value < min) {
            this.value = min
        }
    };

    $("#numberBox").change(limitInput);
});

[〜＃〜] fiddle [〜＃〜]

0
Johnbabu Koppolu

Jqueryだけで書くことができます：

$('#contact').prop('minLength', 2);
$('#contact').prop('maxLength', 10);
0
Акынбек Бержанов