javascript - Javascript の最小値と最大値

Question

以下を使用して、テキストフィールドの値を制限しました。ユーザーが削除して空白のままにしようとすると、それが許可されないという点だけがうまく機能します。最小値は削除されません。量：

<input type="text" placeholder="none" name="notepad_and_pen" id="notepad_and_pen" maxlength="10" style="width:50px" tabindex=4 onchange="this.value = (this.value > 999999) ? 999999 : ((this.value < 400) ? 400 : this.value);">

また、空白のテキストフィールドのプレースホルダーとしてヘッダーにこのスクリプトを入れています。

$('input').focus(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val() == "")
    {
        $(this).val($(this).attr('placeholder'))
    }
}
);

助けが必要です。私はまったくの初心者で、あなたが教えられることは何でも素晴らしいでしょう.みんなに感謝します.

score 0 · Accepted Answer

の値this.valueは文字列です。あなたはそれを数字と比較しています。比較する前に、次のような数値に変換します。

parseFloat(this.value)

もちろん、インラインイベントハンドラーを使用しない場合は、デバッグと操作がはるかに簡単になります。すでにjQueryを使用しているので、これを試してください：

$("#notepad_and_pen").on("change", function () {
    var $this = $(this),
        finalValue = $this.val(),
        myValue = parseFloat(finalValue);
    if (isNaN(myValue)) {
        finalValue = "";
    } else {
        if (myValue > 999999) {
            finalValue = 999999;
        } else if (myValue <= 0) {
            finalValue = "";
        } else if (myValue < 400) {
            finalValue = 400;
        }
    }
    $this.val(finalValue);
});

デモ: http://jsfiddle.net/wTKxX/4/

score -1 · Accepted Answer

#notepad_and_penワンライナーで制限を課したり、削除を許可したりできます。

このページでは、プレースホルダーがネイティブでサポートされているかどうかを検出する方法を提供します (したがって、Modernizr の必要性を回避します)。

このページでは、プレースホルダーを非ネイティブに処理する合理的な方法を提供します。

結合されたコードは次のとおりです。

$(function() {
    //Impose limits on #notepad_and_pen
    $("#notepad_and_pen").on('change', function() {
        this.value = (this.value === '') ? '' : Math.max(400, Math.min(999999, Number(this.value)));
        //Use the following line to reject anything that's zero, blank or not a number, before applying the range limits.
        //this.value = (!Number(this.value)) ? '' : Math.max(400, Math.min(999999, Number(this.value)));
    });

    //With reference to http://diveintohtml5.info/detect.html
    function supports_input_placeholder() {
      var i = document.createElement('input');
      return 'placeholder' in i;
    }

    //With reference to http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
    // 1. Handle placeholders (in non-HTML5 compliant browsers).
    if(!supports_input_placeholder()) {
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();

        //2. Prevent placeholder values being submitted to form's action script
        $('[placeholder]').eq(0).closest('form').submit(function () {
            $(this).find('[placeholder]').each(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            });
        });
    }
});

javascript - Javascript の最小値と最大値

2 に答える 2

Related

Reference