Question

我在jsfiddle中有这段代码，这段代码应该检查无效的数值，如-12-12。因此，如果我键入一个无效的数值（例如-12-11）它会删除输入（这是预期的行为），而奇怪的部分是第二次不调用document.on更改函数时出现错误

重现问题的步骤如下：

例如，类型12。
点击其他文本框中的其他位置，该号码将为
转换为十进制（12.00）
键入错误的数字，如-12-12，然后点击其他地方文本框将被清除（这是预期的行为）。
第二次在文本框中键入该数字时，它不会更改值或清除文本框。

这是我不明白的事情，通过尝试调试代码，第二次插入错误的数字，函数没有被调用，所以我想知道为什么。

感谢任何帮助。

我的javascript代码：

$(document).on('change', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});

Answer 1

我看到了你的问题，并且能够解决它。我建议您使用blur事件代替change事件textbox。这将像一个魅力。

以下是代码：

$(document).on('blur', 'input[type="number"]', function(event) {
    var target = $(event.target);
    var max = target.attr('max') - 0;
    var min = target.attr('min') - 0;
    var step = target.attr('step');
    var val = parseFloat(target.val());
    if(typeof max !== 'undefined' && val > max) {
        target.val(max);
    }
    else if(typeof min !== 'undefined' && val < min) {
        target.val(min);
    }
    else if(typeof step !== 'undefined') {
        if(step < 1) {
            target.val(parseFloat(target.val()).toFixed(step.split('.')[1].length));
        }
        else {
            debugger;
        }
    }
    else if(val + '' != target.val()) {
        target.val(val);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="transaction_amount">Amount</label>
                <input type="number" data-mini="true" step="0.01" name="amount" min="0.01" max="1000000" id="transaction_amount" value="">
                <label for="transaction_external_identifier" id="payment-description-label">Check #</label>
                <input type="text" name="external_identifier" id="transaction_external_identifier" value="" data-mini="true">

Answer 2

当在数字类型输入中输入无效数字时，浏览器会将其视为空白（因为它无效并且不会打扰保留该值，因此在询问有效性时返回false。According to the Mozilla Developer Network）。因此，如果再次键入-12-12，则change事件不会触发，因此它不会清除，因为基础值仍为空白。如果你首先将-12-12输入到空白输入中，你会看到这一点 - 它也不起作用。

您最好的选择是将onchange更改为onblur，因为它不会更加一致，因为它不会查看该值。

jquery移动功能on.change有时只能工作

2 个答案: