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

请帮忙。 我完全是菜鸟，您可以教的任何东西都很棒。谢谢大家。

Answer 1

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/

Answer 2

可以#notepad_and_pen对#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('');
                }
            });
        });
    }
});