jquery - 最小範囲と最大範囲を持つjquery数値テキストボックス

Question

この質問が表示されますが、最小値と最大値の範囲をサポートするソリューションはありません

jQueryを使用してHTML入力ボックスで数値(0-9)のみを許可するには?

http://jstepper.emkay.dk/がこれを試みているようですが、複数の小数点以下の桁数や ";" などの他の文字を入力できるため、非常にバグがあるようです。

これらのソリューションのいずれかを使用して、テキスト ボックス エントリで最小 0 と最大 100 のみをサポートする方法はありますか?

Answer 1

私はjStepperの作成者であり、好きなことをできるようにプラグインを更新しました。

もう一度試してみて、今すぐ機能するかどうかを確認してください:)

Answer 2

そのようなフィールドを追加する HTML5 の方法。Chrome と Safari で動作:

<input type="range" min="0" max="100" step="1" />

完全な例:

<input id="picker" type="range" min="0" max="100" step="1" onchange="$('#pickerValue').text(this.value)" />
<div id="pickerValue"></div>

Answer 3

範囲のみを受け入れるカスタム タイプのテキスト ボックスを作成します。このようなものが動作するはずです：

function RangeTextBox(min, max) {
    this.min = min;
    this.max = max;
    this.textBox = $("<input type='text'>");

    // Disallow non-numbers from being typed in box
    this.textBox.keydown(function(event) {
        var isNotBackspaceOrDelete = event.keyCode != 46 && event.keyCode != 8;
        var isNotInteger = event.keyCode < 48 || event.keyCode > 57;
        if(isNotBackspaceOrDelete && isNotInteger) {
            event.preventDefault();
        }
    });
    // Check for a valid range
    this.textBox.keyup(function(event) {
        var textBox = event.target;
        var isNotInRange = (textBox.value < min) || (textBox.value > max);
        if (isNotInRange) {
            textBox.value = textBox.value.slice(0, -1);
        }
    });

    return this.textBox;
}

これを使用するには、 を呼び出して新しい TextBox を簡単に作成しますnew RangeTextBox(min, max)。例えば

$(document).ready(function() {
    $("body").append(new RangeTextBox(1, 18));
});

免責事項：これは、フィールドの他の回答でハーメンがリストしたのと同じ問題に悩まされています。最小値が2 <6の場合、最小値が6の場合、数値「26」に対して2のような値を受け入れません。タイマーを使用するか、実際にこれを移動できますkeyupandkeydownイベントの外側をチェックし、代わりにonblurorをチェックします。onchangeこれにより、無効なデータがフィールドに入力される可能性がありますが、煩わしさは大幅に軽減されます。

編集:このソリューションでは、何でも入力できますが、範囲外を含むすべての無効な入力にフラグを立てます。

function RangeTextBox(min, max) {
    this.min = min;
    this.max = max;
    this.textBox = $("<input type='text'>");

    // Check for a valid range
    this.textBox.keyup(function(event) {
        var textBox = event.target;
        var value = parseInt(textBox.value);
        var isNotNumeric = !/^[0-9]+$/.test(textBox.value);
        var isOutsideRange = (value < min) || (value > max);
        if (isNotNumeric || isOutsideRange) {
            $(textBox).addClass('error');
        }
        else {
            $(textBox).removeClass('error');
        }
    });

    return this.textBox;
}

そしてスタイルシート:

<style type="text/css">
.error {
    color: red;
}

Answer 4

テキストボックス MIN MAX - jQuery 関数

たとえば、jQuery を使用して「テキスト ボックス エントリで最小値 0 と最大値 100 のみをサポートする」方法を次に示します。値が MIN 未満または MAX を超えるキーを入力した場合、エントリを以前の状態に戻すことによって機能します。整数のみを受け入れるようにフラグを設定できます。

HTML タグは次のようになります: ( JSFIDDLE )

<input type="text" class="maxmin" min="0" max="100" intOnly="true" />

次に、ドキュメント対応コードで次の JavaScript を実行します。

// Run this on document ready to allow only numbers between
// max and min to be entered into textboxes with class="maxmin".
// Attributes max, min, and intOnly="true/false" are set in the tag.
// Min should probably be "0" or "1", or max and min could be single digits.
// Otherwise for example, if min=5, you couldn't enter 23 because 2 < 5.
$(".maxmin").each(function () {

    var thisJ = $(this);
    var max = thisJ.attr("max") * 1;
    var min = thisJ.attr("min") * 1;
    var intOnly = String(thisJ.attr("intOnly")).toLowerCase() == "true";

    var test = function (str) {
        return str == "" || /* (!intOnly && str == ".") || */
            ($.isNumeric(str) && str * 1 <= max && str * 1 >= min &&
            (!intOnly || str.indexOf(".") == -1) && str.match(/^0\d/) == null);
            // commented out code would allow entries like ".7"
    };

    thisJ.keydown(function () {
        var str = thisJ.val();
        if (test(str)) thisJ.data("dwnval", str);
    });

    thisJ.keyup(function () {
        var str = thisJ.val();
        if (!test(str)) thisJ.val(thisJ.data("dwnval"));
    })
});

私はこれが初めてなので、建設的なコメントをいただければ幸いです。

Answer 5

スクリプトがどのように見えるかの例を次に示します。

var value, min=6, max=100;

function isNumberPressed(k) {
    // 48-57 are number 0-9 on a normal keyboard, 96-105 are keypad numbers
    return (k > 47 && k < 58) || (k > 95 && k < 106) ? true : false;
}

function isValidNumber(v){
    // Check if a valid number is entered
    return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}

$(document).ready(function() {
    $("#test").keydown(function(e) {
        // See if a valid key is pressed
        if(isNumberPressed(e.keyCode)){
            if(isValidNumber($(this).val())) value = $(this).val();
        } 
        // Do nothing if unallowed keys are pressed
        else if(e.keyCode != 46 && e.keyCode != 8) return false;
    }).keyup(function(){
        // If the value, including the latest number that's added, is not valid (to high or to low), show the old value again
        if(isValidNumber($(this).val()) == false){
            $(this).val(value);
        }
    });
});

ただし、2 <6であるため、最小値が6の場合は26を入力できないという大きな欠点があります。最小値が10以下の場合、これは問題になりません。

ただし、最小値が10を超える場合は、次のコードを検討できます。

var timer, min=36, max=100;

function isValidNumber(v){
    // Check if a valid number is entered
    return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}

$(document).ready(function() {
    $("#test").keydown(function(e) {
        that = this;

        // Clear the timer
        if(timer)
            clearTimeout(timer);

        // Set a new timer with a delay of one second
        timer = setTimeout(function(){
            if(isValidNumber($(that).val()) == false) $(that).addClass('error');
            else $(that).removeClass('error');
        }, 1000);        
    });
});

1秒の遅延で入力をチェックします。これにはCSSコードが必要です。次に例を示します。

input.error {
    border: 2px solid red;
}

どちらのスクリプトもその場で値をチェックします。これは優れた方法です。

Answer 6

min、max、step をサポートする jQuery SpinControlを作成しました。カスタムのものを追加する前に、SpinControl がブラウザー (Opera) で既にサポートされているかどうかを最初に確認します。

Answer 7

JStepper にはバグがあり、サイトでテスターを試してみました。 http://jstepper.emkay.dk/Default.aspx

ルールを適用しますが、テキストを入力できます: 8778.09999