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

DEMO： http://jsfiddle.net/wTKxX/4/

Answer 2

可以施加#notepad_and_pen的限制，允许删除，使用单行。

This page提供了一种检测占位符是否本机支持的方法（从而避免使用Modernizr）。

this page提供了一种非本地处理占位符的合理方法。

以下是组合代码：

$(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最小值和最大值

2 个答案: