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

I have this code in jsfiddle, this code is supposed to check for invalid numerical values like -12-12. So the bug arises if I type an invalid numerical value (eg. -12-11) it removes the input (which is the expected behavior) and the weird part is that the second time it doesn't call the document.on change function.

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

The steps to reproduce the problem are as follows:

重现问题的步骤如下：

Type 12 for example.

例如，输入12。
Click somewhere else like the other textbox and that number will be
converted to decimal (12.00)

单击其他文本框中的其他位置，该数字将转换为十进制（12.00）
Type and incorrect number like -12-12 and click somewhere else and the textbox will get cleared out (which is the expected behaviour).
键入和错误的数字，如-12-12并单击其他地方，文本框将被清除（这是预期的行为）。
The second time you type that number in the textbox it doesn't change the value or clear the textbox.

第二次在文本框中键入该数字时，它不会更改值或清除文本框。

This is something that I don't understand, by trying to debug the code the second time you insert a wrong number that function doesn't get called so I was wondering why.

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

Any help is appreciated.

任何帮助表示赞赏。

My javascript code:

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

2 个解决方案

#1

I see your issue, and able to solve it. I suggest you to use blur event instead of change event of textbox. This will work like a charm.

我看到了你的问题，并且能够解决它。我建议你使用模糊事件而不是文本框的更改事件。这将像一个魅力。

Here is the code :

这是代码：

$(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">

#2

When an invalid number is entered into the number type input, the browser regards that as blank (because it's invalid and it won't bother holding that value, so returns false when asked about validity. According to the Mozilla Developer Network). So if you type -12-12 again, the change event doesn't fire and hence it doesn't clear out because the underlying value is still blank. You'll see this if you first start with entering -12-12 into the blank input - it also won't work.

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

Your best bet is to change the onchange to onblur as it will be far more consistent since it doesn't look at the value.

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

#1